Drupal8+微信小程序：4，实现小程序下面的动态列表

作者： 老葛 亚艾元软件

先出页面，对应的文件都创建出来。逻辑层js里面的代码，空着先，模板文件里面写上对应文字。比如对于新闻动态页面，我们是这样创建的：

news.js

Page({

  data: {

    items: []

  },

 

  onLoad: function () {

    console.log('onLoad')

    var that = this

  }

})

news.wxml:

<view>

  <text>动图棋谱-象甲蒋川飞刀喋血 王天一超级逆转1</text>

  <text>动图棋谱-象甲蒋川飞刀喋血 王天一超级逆转1</text>

  <text>动图棋谱-象甲蒋川飞刀喋血 王天一超级逆转1</text>

  <text>动图棋谱-象甲蒋川飞刀喋血 王天一超级逆转1</text>

  <text>动图棋谱-象甲蒋川飞刀喋血 王天一超级逆转1</text>

</view>

 

news.wxss,里面代码为空，只有注释：

/**news.wxss**/

   这样的话，我们可以快速的创建多个静态的小程序页面，将这些页面在app.json里面注册一下：

{

  "pages":[

    "pages/index/index",

    "pages/qipus/qipus",

"pages/qipus/qipuitem",

    "pages/players/players",

"pages/news/news"

  ],

  "window":{

    "backgroundTextStyle":"light",

    "navigationBarBackgroundColor": "#fff",

    "navigationBarTitleText": "亚艾元象棋",

    "navigationBarTextStyle":"black"

  }

}

其它小程序页面，前期也是这么创建，先搭建一个骨架出来，然后再往里面写内容。这个时候，我们调整index页面的模板文件，调整的内容如下：

<!--index.wxml-->

<view>

<view>

  <view>请输入与查找棋谱相关的关键字：</view>

  <input placeholder="王天一" type="text"/>

  <button>搜索</button>

</view>

 

<view>

  <navigator url="/pages/qipus/qipus" hover-class="navigator-hover">最新棋谱</navigator>

  <navigator url="/pages/opening/opening" hover-class="navigator-hover">开局导航</navigator>

  <navigator url="/pages/players/players" hover-class="navigator-hover">棋手风采</navigator>

</view>

 

<view>

  <navigator url="/pages/news/news?type=1" hover-class="navigator-hover">象棋动态</navigator>

  <navigator url="/pages/news/news?type=2" hover-class="navigator-hover">象棋赛事</navigator>

  <navigator url="/pages/news/news?type=3" hover-class="navigator-hover">象棋典故</navigator>

</view>

</view>

这里面，我们使用了微信小程序的组件navigator，实现了从小程序页面之间的跳转。

 

接下来要做的时候实现里面的具体功能。我们以新闻列表为例，首先先实现一个简单的版本。这里面，我们要做的工作包含两部分，小程序端的，Drupal端的。在小程序端，我们需要发起一个http请求，获取象棋新闻的最新数据，获取后，将其展现出来。Drupal端，我们需要配置rest结构，为小程序提供数据。

 

加了http请求的news.js代码：

Page({

  data: {

    items: []

  },

 

  onLoad: function () {

    console.log('onLoad')

    var that = this

    wx.request({

          url: 'http://chess.yaiyuan.com/jsonnews/' + options.type + '?page=' + that.data.page,

          method: 'GET',

          success:function(res) {

              that.setData({

                  items: res.data

              })

  console.log(that.data.items)

          }

    })

  }

})

微信小程序，发起http请求，使用 wx.request，向其提供URL路径，使用的方法“GET”，请求成功后，调用 success:function(res) 回调函数。在成功回调函数里面，我们将http请求返回的数据res.data赋值给页面数据的items。为了调试的方便，我这里面加了console.log。另外，需要注意的是var that =this这句代码。这主要是方便wx.request里面调用当前页面的setData函数。我的理解是，wx.request的成功回调函数里面，this所指的对象已经不是当前页面，为了引用当前页面，在范围外，需要将它设置为that。

 

对应的模板文件：

<view>

<view wx:for="{{items}}" >

            <navigator url="/pages/news/newsitem?nid={{item.nid}}" >

                <view>{{item.title}}</view>

            </navigator>

</view>

</view>

Drupal端，使用views输出，注意显示类型选择REST export，做以下配置：

8-2-4-1.png 

图8-2-4-1

 

   我的象棋新闻分三类：动态、赛事、典故，所以这里面，使用了上下文过滤器，传递一个分类术语id。字段的话，我们输出字段、标题、内容ID。如果以前使用过Drupal7下面的service的话，输出的json的字段的机读名字可以在字段的label里面设置，但是在Drupal8里面，是在这个地方设置:

8-2-4-2.png 

图8-2-4-2

 

点击这类的设置，我们看到这样的弹出框：

8-2-4-3.png 

图8-2-4-3

 

   这里面，可以设置字段的别名。如果不修改的话，输出这样的格式：

[{"field_image":"","title":"2017\u5e74\u5168\u56fd\u8c61\u68cb\u4e2a\u4eba\u8d5b\u6fc0\u6218\u6b63\u9163 \u7537\u5b50\u5341\u516d\u5f3a\u4ea7\u751f","nid":"89605"},

修改后：

[{"img_url":"","title":"2017\u5e74\u5168\u56fd\u8c61\u68cb\u4e2a\u4eba\u8d5b\u6fc0\u6218\u6b63\u9163 \u7537\u5b50\u5341\u516d\u5f3a\u4ea7\u751f","nid":"89605"},

我是后来才发现这样配置的，所以前期我用的默认配置，后来都沿用了默认配置。

 

   另外，这里还用到了小程序页面之间参数的传递，就目前我了解的，小程序，只支持通过参数传递。我们通过这样的URL格式传递参数：

/pages/news/news

/pages/news/news?type=1

 

在参数的接收页面

  onLoad: function (options) {

    console.log('onLoad')

    var that = this;

var type = options.type;

 

Onload参数options里面，包含了参数的信息，我们可以这样取到参数的值。

 


Drupal版本: