小程序模板网

WeChat 文章列表页面(二)

发布时间:2018-04-20 10:58 所属栏目:小程序开发教程

Unsplash本次的系列博文的知识点讲解和代码,主要是来自于七月老师的书籍《微信小程序开发:入门与实践》,由个人总结并编写,关于更多微信小程序开发中的各项技能,以及常见问题的解决方案,还请大家购买书籍进行学 ...

 
 
 

Unsplash

本次的系列博文的知识点讲解和代码,主要是来自于 七月老师 的书籍《微信小程序开发:入门与实践》,由个人总结并编写,关于更多微信小程序开发中的各项技能,以及常见问题的解决方案,还请大家购买书籍进行学习实践,该系列博文的发布已得到七月老师的授权许可

授权许可

我们在 WeChat 文章列表页面(一) 中,已经完成了文章列表页面了,效果图如下所示


文章列表页面

1. Page 页面的生命周期

post.js 文件默认包含的代码如下所示


Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

可以看到,整个页面执行了一个 Page({...}) 方法,参数是一个 Object 对象,用来指定页面的初始数据 (data)、生命周期函数 (on 开头的函数)、事件处理函数等

一个页面从创建到卸载,会经历以下 5 个周期:加载、显示、渲染、隐藏、卸载,MINA 框架分别提供了 5 个生命周期函数来监听这 5 个特定的生命周期,以方便开发者可以在这些特定的时刻执行一些自己的代码逻辑,它们分别是:

  • onLoad 监听页面加载,一个页面只会调用一次
  • onShow 监听页面显示,每次打开页面都会调用
  • onReady 监听页面初次渲染完成,一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互
  • onHide 监听页面隐藏
  • onUnload 监听页面卸载

除了以上 5 个生命周期函数之外,还包括以下 3 个小程序特定事件的处理函数:

  • onPullDownRefresh 监听用户下拉动作的事件处理函数
  • onReachBottom 页面上拉触底事件的处理函数
  • onShareAppMessage 用户点击右上角分享

我们接下来通过控制台打印的方式,来看下生命周期函数及事件处理函数的触发时机,也可以通过打断点的方式,进行调试,具体代码如下所示:


Page({
  data: {

  },
  onLoad: function (options) {
    console.log("onLoad:页面被加载");
  },
  onReady: function () {
    console.log("onReady:页面被渲染");    
  },
  onShow: function () {
    console.log("onShow:页面被显示");    
  },
  onHide: function () {
    console.log("onHide:页面被隐藏");    
  },
  onUnload: function () {
    console.log("onUnload:页面被卸载");    
  },
  onPullDownRefresh: function () {
     console.log("onPullDownRefres:监听用户下拉动作");    
  },
  onReachBottom: function () {
       console.log("onReachBottom:页面上拉触底事件");    
  },
  onShareAppMessage: function () {
       console.log("onShareAppMessage:用户点击右上角分享");   
  }
})

运行结果

可以看到,一个页面要正常显示,必须经过以上 3 个生命周期:加载、显示、渲染,至于 onHide 和 onUnload 函数,以及 3 个特定事件的处理函数,它们的触发都需要执行一些 API 操作,这些我们到之后的部分再做介绍

官方文档中,也是给出 Page 实例生命周期的图解,同时也告诉我们,以下内容你不需要立马完全弄明白,不过以后它会有帮助,所以在这里建议大家的是,在遇到问题或者业务需要时,再回过头来研究这张完整的生命周期图更有意义


页面生命周期

2. 数据绑定

在真实项目中,业务数据通常都放置在自己的服务器中,然后通过 HTTP 请求来访问服务器提供的 RESTFUI API,从而实现数据的获取

接下来,我们尝试将编码在 post.wxml 文件里的数据移植到 post.js 中,在 post.js 中加入一个临时变量 postData 来模拟文章数据,并将上一小节中测试生命周期的代码移除,编写完成后的代码如下:


Page({
  data: {
    date: "Jan 28 2017",
    title: "小时候的冰棍儿与雪糕",
    postImg: "/images/post/post-4.jpg",
    avatar: "/images/avatar/avatar-5.png",
    content: "冰棍与雪糕绝对不是同一个东西。3到5毛钱的雪糕犹如现在的哈根达斯,而5分1毛的冰棍儿就像现在的老冰棒。时过境迁,...",
    readingNum: 92,
    collectionNum: 108,
    commentNum: 7
  },
})

如果是传统的网页开发,我们会想到,先获取 HTML 文档的 DOM,然后对 DOM 标签进行复制,从而实现数据的显示,但在小程序中,是没有 DOM 结构的,无法通过这样的方式,将数据“填充”到页面当中

在现在流行的 MVC 或者 MVVM 框架中,如 AngularJS、Vue.js 中,都有数据绑定的概念,小程序也是借鉴了这些流行框架的思想,采用数据绑定的机制来做数据的初始化和更新

不同于 AngularJS 的双向数据绑定,小程序仅实现了单向数据绑定,即只支持从逻辑层传递到渲染层的数据绑定,反之则不可以

小程序使用 Page 方法参数里的 data 变量作为数据绑定的桥梁,data 里已经被我们放置了一些数据,这些直接写在 data 里的数据,被称为数据绑定的初始化数据

需要注意的是,数据绑定有以下两种:

  • 一种是初始化数据的数据绑定,通常将这些数据直接写在 Page 方法参数的 data 对象下面
  • 另外一种是使用 setData 方法来做数据绑定,这种方式也可以理解为数据更新,这样的数据更新将引起页面的 Rerender(重新渲染),参考上一小节的页面生命周期图

接下来,我们对 post.wxml 文件做一些改动,使用 Mustache 语法的双大括号 {{}} 在 wxml 组件里进行数据的绑定,凡是对标签属性做绑定的,一定要记得加上双引号,代码如下:


<view class="post-container">
  <view class="post-author-date">
    <image src="{{avatar}}" />
    <text>{{date}}text>
  view>
  <text class="post-title">{{title}}text>
  <image class="post-image" src="{{postImg}}" mode="aspectFill" />
  <text class="post-content">{{content}}text>
  <view class="post-like">
    <image src="/images/icon/wx_app_collect.png" />
    <text>{{collectionNum}}text>
    <image src="/images/icon/wx_app_view.png" />
    <text>{{readingNum}}text>
    <image src="/images/icon/wx_app_message.png" />
    <text>{{commentNum}}text>
  view>
view>

运行结果

我们通过页面生命周期图解,来解释一下初始化数据绑定的过程,当页面执行了 onShow 函数后,逻辑层会收到一个通知 (Notify);随后逻辑层会将 data 对象以 json 的形式发送到 View 视图层 (Send Initial Data),视图层接受初始化数据后,开始渲染并显示初始化数据 (First Render),最终将数据呈现在开发者的面前

我们打开“编辑”选项卡,点击 AppData 就能够看到数据绑定变量,如下图所示


post 页面在 AppData 面板中的数据绑定情况

点击 Tree 选项,切换成 Code,数据将以 json 的形式呈现,如下图所示


以 json 的格式呈现数据

如果 data 对象的属性较为复杂,包括对象和数组,那需要相应的调整 wxml 文件,可以看下面两张图进行理解


较为复杂的 data 对象

根据 data 对象结构调整的 wxml

3. 数据绑定更新

通过 setData 函数来进行数据绑定,这种方式可以理解为“数据更新”,setData 方法位于 Page 对象的原型链上:Page.prototype.setData,在大多数的情况下,我们使用 this.setData 的方式来调用这个方法

setData 的参数接受一个对象,以 key 和 value 的形式将 this.data 中的 key 对应的值设置成 value,这句话需要注意两点:① setData 会改变 this.data 变量里相同 key 的值;② setData 执行后会通知逻辑层执行 Rerender,并立刻重新渲染视图


Page({
  data: {
    object: {
      date: "Jan 28 2017"
    },
    title: "小时候的冰棍儿与雪糕",
    postImg: "/images/post/post-4.jpg",
    avatar: "/images/avatar/avatar-5.png",
    content: "冰棍与雪糕绝对不是同一个东西。3到5毛钱的雪糕犹如现在的哈根达斯,而5分1毛的冰棍儿就像现在的老冰棒。时过境迁,...",
    readingNum: 92,
    collectionNum: {
      array: [108]
    },
    commentNum: 7
  },
  onLoad:function(){
    this.setData({
      title: "一根雪糕的经济学原理"
    })
  }
})

运行结果

可以看到,第一篇文章的标题由 data 里所设置的 title:"小时候的冰棍儿与雪糕",被更改成了“一根雪糕的经济学原理”,key 可以使用字符串来表示,可以看下面 3 个例子



易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/23773.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询