用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 实战教程 查看内容

微信小程序WeSJTU开发心得

天下雪 2017-2-2 00:42

从今天开始,小程序联盟网站正式恢复正常状态!十一期间没什么事,我试着写了一个微信小程序WeSJTU。现在,回过头来,把自己开发小程序的心得给总结一下。构思微信小程序的文档,比较难的部分,如数据绑定,其思想和 ...

从今天开始,小程序联盟网站正式恢复正常状态!

十一期间没什么事,我试着写了一个微信小程序WeSJTU。现在,回过头来,把自己开发小程序的心得给总结一下。

构思

微信小程序的文档,比较难的部分,如数据绑定,其思想和AngularJS是非常相近的,而所谓的WXSS,基本上可以认为是CSS,只是不方便用SCSS了——WXSS原则上不支持级联,所以整个文档看下来基本上就能上手了。

先从简单有意思的开始吧,所以我设想了三个Tab

  • 同去同去网是交大活动发布的主要阵地,它有很完善的API,可以通过GET请求返回活动列表、活动详情的JSON数据,另外还支持分页。
  • 2048. 根据别人写的数字2048,打算改成文字2048——苟利国家生死以,岂因祸福避趋之,蛤蛤...
  • 反馈。这一部分,想做一个简单的反馈功能,用户可以在小程序里反馈,我可以在网页上查看反馈内容列表。

代码

同去

活动列表页面,前端可以用小程序的列表渲染很方便地实现。

<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);
                    
鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: 剪影Boy 来自: 授权地址

相关阅读