You are here

Drupal8+微信小程序:9,象棋棋谱开局分类导航的实现

作者: 老葛 亚艾元软件

棋手列表,棋手详细信息展示,棋谱列表、棋谱详细页面,这些功能,和新闻列表、新闻详细类似,对于棋谱详细页面,前面专门讲过,这里只需要改进一下,把棋谱的获取改为动态,从服务器下载即可。

我们先在Drupal端,准备好json数据,这是我的配置:

8-2-9-1.png 

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.png

8-2-9-2

 


Drupal版本: