十一期间没什么事,我试着写了一个微信小程序WeSJTU。现在,回过头来,把自己开发小程序的心得给总结一下。构思微信小程序的文档,比较难的部分,如数据绑定,其思想和 ...
十一期间没什么事,我试着写了一个微信小程序WeSJTU
。现在,回过头来,把自己开发小程序的心得给总结一下。
微信小程序的文档,比较难的部分,如数据绑定,其思想和AngularJS
是非常相近的,而所谓的WXSS
,基本上可以认为是CSS
,只是不方便用SCSS
了——WXSS原则上不支持级联,所以整个文档看下来基本上就能上手了。
先从简单有意思的开始吧,所以我设想了三个Tab
:
活动列表页面,前端可以用小程序的列表渲染很方便地实现。
<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>
由于同去网不支持HTTPS
,而小程序的wx.request
发起的是HTTPS请求,所以需要在后端将请求转发一下。后端我用的是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);