You are here

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版本: