网友真实露脸自拍10p,成人国产精品秘?久久久按摩,国产精品久久久久久无码不卡,成人免费区一区二区三区

小程序模板網(wǎng)

微信小程序WeSJTU開發(fā)心得

發(fā)布時間:2017-11-28 16:56 所屬欄目:小程序開發(fā)教程

十一期間沒什么事,我試著寫了一個微信小程序WeSJTU。現(xiàn)在,回過頭來,把自己開發(fā)小程序的心得給總結(jié)一下。構(gòu)思微信小程序的文檔,比較難的部分,如數(shù)據(jù)綁定,其思想和 ...

 
 
 

十一期間沒什么事,我試著寫了一個微信小程序WeSJTU。現(xiàn)在,回過頭來,把自己開發(fā)小程序的心得給總結(jié)一下。

構(gòu)思

微信小程序的文檔,比較難的部分,如數(shù)據(jù)綁定,其思想和AngularJS是非常相近的,而所謂的WXSS,基本上可以認(rèn)為是CSS,只是不方便用SCSS了——WXSS原則上不支持級聯(lián),所以整個文檔看下來基本上就能上手了。

先從簡單有意思的開始吧,所以我設(shè)想了三個Tab

  • 同去。同去網(wǎng)是交大活動發(fā)布的主要陣地,它有很完善的API,可以通過GET請求返回活動列表、活動詳情的JSON數(shù)據(jù),另外還支持分頁。
  • 2048. 根據(jù)別人寫的數(shù)字2048,打算改成文字2048——茍利國家生死以,豈因禍福避趨之,蛤蛤...
  • 反饋。這一部分,想做一個簡單的反饋功能,用戶可以在小程序里反饋,我可以在網(wǎng)頁上查看反饋內(nèi)容列表。

代碼

同去

活動列表頁面,前端可以用小程序的列表渲染很方便地實現(xiàn)。

<scroll-view class="acts-list" scroll-y="true" bindscrolltolower="lower">
    <block wx:for="{{actsList}}">
        <view class="act-item" index="{{index}}" id="{{item.actid}}" catchtap="redictDetail">
            ...
        </view>
    </block>
    <view class="load-more" hidden="{{moreHidden}}">
        <view class="load-content">
            <text class="weui-loading"></text>
            <text class="loading-text">玩命加載中</text>
        </view>
    </view>
</scroll-view>

由于同去網(wǎng)不支持HTTPS,而小程序的wx.request發(fā)起的是HTTPS請求,所以需要在后端將請求轉(zhuǎn)發(fā)一下。后端我用的是Node.js.

router.get('/acts', function(req, res, next) {
    var query = require('url').parse(req.url, true).query;
    var offset = query.offset;
    var order = query.order;
    var indexUrl = "http://tongqu.me/index.php/api/act/type?type=0&offset=" + offset + "&order=" + order;
    http.get(indexUrl, function(response) {
        var source = "";
        response.on('data', function(data) {
            source += data;
        });
        response.on('end', function() {
            source = JSON.parse(source);
            var actsList = [];
            var acts = source.result.acts;
            var actsLength = acts.length;
            for (i = 0; i < actsLength; i++) {
                var poster = acts[i].poster;
                var status = acts[i].time_status_str;
                var status_style = '';
                if (!poster) {
                    var index = Math.round(Math.random() * 6);


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://www.xiuhaier.com/wxmini/doc/course/17968.html 復(fù)制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢:800182392 點擊咨詢
QQ在線咨詢
AI智能客服 ×