十一期間沒什么事,我試著寫了一個微信小程序WeSJTU。現(xiàn)在,回過頭來,把自己開發(fā)小程序的心得給總結(jié)一下。構(gòu)思微信小程序的文檔,比較難的部分,如數(shù)據(jù)綁定,其思想和 ...
十一期間沒什么事,我試著寫了一個微信小程序WeSJTU
。現(xiàn)在,回過頭來,把自己開發(fā)小程序的心得給總結(jié)一下。
微信小程序的文檔,比較難的部分,如數(shù)據(jù)綁定,其思想和AngularJS
是非常相近的,而所謂的WXSS
,基本上可以認(rèn)為是CSS
,只是不方便用SCSS
了——WXSS原則上不支持級聯(lián),所以整個文檔看下來基本上就能上手了。
先從簡單有意思的開始吧,所以我設(shè)想了三個Tab
:
活動列表頁面,前端可以用小程序的列表渲染很方便地實現(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);