作者: 老葛 亚艾元软件
棋手列表,棋手详细信息展示,棋谱列表、棋谱详细页面,这些功能,和新闻列表、新闻详细类似,对于棋谱详细页面,前面专门讲过,这里只需要改进一下,把棋谱的获取改为动态,从服务器下载即可。
我们先在Drupal端,准备好json数据,这是我的配置:
图8-2-9-1
这里,棋谱开局列表,相对复杂一些,主要是在小程序的逻辑层,写了一点稍微复杂的代码。
Opening.js里面包含了获取象棋开局分类的代码:
Page({
data: {
terms: []
},
reOrganizeTerms: function (terms) {
var pterms = [];
var subterms = {};
for (var i = 0; i < terms.length; i++) {
var term = terms[i] || {};
var ptid = term.ptid || '';
if( ptid == ''){
pterms.push(term);
}else{
var temp_subterms = subterms[ptid] || [];
temp_subterms.push(term);
subterms[ptid] = temp_subterms;
}
}
for (var j = 0; j < pterms.length; j++) {
var pterm = pterms[j] || {};
var tid = pterm.tid || '';
//var subs = subterms[tid] || [];
pterm.subs = subterms[tid] || [];
pterms[j] = pterm;
}
return pterms;
},
onLoad: function (options) {
//console.log('onLoad')
var that = this;
wx.request({
url: 'http://chess.yaiyuan.com/jsonopenings',
method: 'GET',
success:function(res) {
var termsTmp = res.data;
var terms = that.reOrganizeTerms(termsTmp);
that.setData({
terms: terms
})
//console.log(that.data.terms)
}
})
}
})
对应模板文件:opening.wxml,代码如下:
<view>
<view>
<view>布局导航</view>
</view>
<view>
<block wx:for="{{terms}}" wx:for-index="idx" wx:for-item="term">
<view>
<view>
<navigator url="/pages/opening/openinglist?tid={{term.tid}}">
{{term.name}}
</navigator>
</view>
<view>
<view class="weui-media-box weui-media-box_small-appmsg">
<view class="weui-cells weui-cells_in-small-appmsg">
<block wx:for="{{term.subs}}" wx:for-index="idx1" wx:for-item="sub">
<navigator url="/pages/opening/openinglist?tid={{sub.tid}}" class="weui-cell weui-cell_access" hover-class="weui-cell_active">
<view class="weui-cell__bd weui-cell_primary">
<view>{{sub.name}}</view>
</view>
<view class="weui-cell__ft weui-cell__ft_in-access"></view>
</navigator>
</block>
</view>
</view>
</view>
</view>
</block>
</view>
</view>
开局包含两级分类,从Drupal端获取到的json数据,格式没有明确包含层级关系,但是也自带的层级关系。为了让它满足微信小程序端的需要,我自己写了一个reOrganizeTerms函数,重新组织了层级关系。
在模板文件中,使用了两边wx:for循环:
<block wx:for="{{terms}}" wx:for-index="idx" wx:for-item="term">
<block wx:for="{{term.subs}}" wx:for-index="idx1" wx:for-item="sub">
这里面就这么多的道道。
图8-2-9-2