Unsplash

本次的系列博文的知識點講解和代碼，主要是來自于 七月老師 的書籍《微信小程序開發(fā)：入門與實踐》，由個人總結(jié)并編寫，關(guān)于更多微信小程序開發(fā)中的各項技能，以及常見問題的解決方案，還請大家購買書籍進行學習實踐，該系列博文的發(fā)布已得到七月老師的授權(quán)許可

我們在 WeChat 文章列表頁面（一） 中，已經(jīng)完成了文章列表頁面了，效果圖如下所示

文章列表頁面

1. Page 頁面的生命周期

post.js 文件默認包含的代碼如下所示

Page({

  /**
   * 頁面的初始數(shù)據(jù)
   */
  data: {

  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面加載
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面顯示
   */
  onShow: function () {

  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面隱藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面卸載
   */
  onUnload: function () {

  },

  /**
   * 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 頁面上拉觸底事件的處理函數(shù)
   */
  onReachBottom: function () {

  },

  /**
   * 用戶點擊右上角分享
   */
  onShareAppMessage: function () {

  }
})

可以看到，整個頁面執(zhí)行了一個 Page({...}) 方法，參數(shù)是一個 Object 對象，用來指定頁面的初始數(shù)據(jù) (data)、生命周期函數(shù) (on 開頭的函數(shù))、事件處理函數(shù)等

一個頁面從創(chuàng)建到卸載，會經(jīng)歷以下 5 個周期：加載、顯示、渲染、隱藏、卸載，MINA 框架分別提供了 5 個生命周期函數(shù)來監(jiān)聽這 5 個特定的生命周期，以方便開發(fā)者可以在這些特定的時刻執(zhí)行一些自己的代碼邏輯，它們分別是：

• onLoad 監(jiān)聽頁面加載，一個頁面只會調(diào)用一次
• onShow 監(jiān)聽頁面顯示，每次打開頁面都會調(diào)用
• onReady 監(jiān)聽頁面初次渲染完成，一個頁面只會調(diào)用一次，代表頁面已經(jīng)準備妥當，可以和視圖層進行交互
• onHide 監(jiān)聽頁面隱藏
• onUnload 監(jiān)聽頁面卸載

除了以上 5 個生命周期函數(shù)之外，還包括以下 3 個小程序特定事件的處理函數(shù)：

• onPullDownRefresh 監(jiān)聽用戶下拉動作的事件處理函數(shù)
• onReachBottom 頁面上拉觸底事件的處理函數(shù)
• onShareAppMessage 用戶點擊右上角分享

我們接下來通過控制臺打印的方式，來看下生命周期函數(shù)及事件處理函數(shù)的觸發(fā)時機，也可以通過打斷點的方式，進行調(diào)試，具體代碼如下所示：

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:監(jiān)聽用戶下拉動作");    
  },
  onReachBottom: function () {
       console.log("onReachBottom:頁面上拉觸底事件");    
  },
  onShareAppMessage: function () {
       console.log("onShareAppMessage:用戶點擊右上角分享");   
  }
})

運行結(jié)果

可以看到，一個頁面要正常顯示，必須經(jīng)過以上 3 個生命周期：加載、顯示、渲染，至于 onHide 和 onUnload 函數(shù)，以及 3 個特定事件的處理函數(shù)，它們的觸發(fā)都需要執(zhí)行一些 API 操作，這些我們到之后的部分再做介紹

官方文檔中，也是給出 Page 實例生命周期的圖解，同時也告訴我們，以下內(nèi)容你不需要立馬完全弄明白，不過以后它會有幫助，所以在這里建議大家的是，在遇到問題或者業(yè)務(wù)需要時，再回過頭來研究這張完整的生命周期圖更有意義

頁面生命周期

2. 數(shù)據(jù)綁定

在真實項目中，業(yè)務(wù)數(shù)據(jù)通常都放置在自己的服務(wù)器中，然后通過 HTTP 請求來訪問服務(wù)器提供的 RESTFUI API，從而實現(xiàn)數(shù)據(jù)的獲取

接下來，我們嘗試將編碼在 post.wxml 文件里的數(shù)據(jù)移植到 post.js 中，在 post.js 中加入一個臨時變量 postData 來模擬文章數(shù)據(jù)，并將上一小節(jié)中測試生命周期的代碼移除，編寫完成后的代碼如下：

Page({
  data: {
    date: "Jan 28 2017",
    title: "小時候的冰棍兒與雪糕",
    postImg: "/images/post/post-4.jpg",
    avatar: "/images/avatar/avatar-5.png",
    content: "冰棍與雪糕絕對不是同一個東西。3到5毛錢的雪糕猶如現(xiàn)在的哈根達斯，而5分1毛的冰棍兒就像現(xiàn)在的老冰棒。時過境遷，...",
    readingNum: 92,
    collectionNum: 108,
    commentNum: 7
  },
})

如果是傳統(tǒng)的網(wǎng)頁開發(fā)，我們會想到，先獲取 HTML 文檔的 DOM，然后對 DOM 標簽進行復(fù)制，從而實現(xiàn)數(shù)據(jù)的顯示，但在小程序中，是沒有 DOM 結(jié)構(gòu)的，無法通過這樣的方式，將數(shù)據(jù)“填充”到頁面當中

在現(xiàn)在流行的 MVC 或者 MVVM 框架中，如 AngularJS、Vue.js 中，都有數(shù)據(jù)綁定的概念，小程序也是借鑒了這些流行框架的思想，采用數(shù)據(jù)綁定的機制來做數(shù)據(jù)的初始化和更新

不同于 AngularJS 的雙向數(shù)據(jù)綁定，小程序僅實現(xiàn)了單向數(shù)據(jù)綁定，即只支持從邏輯層傳遞到渲染層的數(shù)據(jù)綁定，反之則不可以

小程序使用 Page 方法參數(shù)里的 data 變量作為數(shù)據(jù)綁定的橋梁，data 里已經(jīng)被我們放置了一些數(shù)據(jù)，這些直接寫在 data 里的數(shù)據(jù)，被稱為數(shù)據(jù)綁定的初始化數(shù)據(jù)

需要注意的是，數(shù)據(jù)綁定有以下兩種：

• 一種是初始化數(shù)據(jù)的數(shù)據(jù)綁定，通常將這些數(shù)據(jù)直接寫在 Page 方法參數(shù)的 data 對象下面
• 另外一種是使用 setData 方法來做數(shù)據(jù)綁定，這種方式也可以理解為數(shù)據(jù)更新，這樣的數(shù)據(jù)更新將引起頁面的 Rerender（重新渲染），參考上一小節(jié)的頁面生命周期圖

接下來，我們對 post.wxml 文件做一些改動，使用 Mustache 語法的雙大括號 {{}} 在 wxml 組件里進行數(shù)據(jù)的綁定，凡是對標簽屬性做綁定的，一定要記得加上雙引號，代碼如下：

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

運行結(jié)果

我們通過頁面生命周期圖解，來解釋一下初始化數(shù)據(jù)綁定的過程，當頁面執(zhí)行了 onShow 函數(shù)后，邏輯層會收到一個通知 (Notify)；隨后邏輯層會將 data 對象以 json 的形式發(fā)送到 View 視圖層 (Send Initial Data)，視圖層接受初始化數(shù)據(jù)后，開始渲染并顯示初始化數(shù)據(jù) (First Render)，最終將數(shù)據(jù)呈現(xiàn)在開發(fā)者的面前

我們打開“編輯”選項卡，點擊 AppData 就能夠看到數(shù)據(jù)綁定變量，如下圖所示

post 頁面在 AppData 面板中的數(shù)據(jù)綁定情況

點擊 Tree 選項，切換成 Code，數(shù)據(jù)將以 json 的形式呈現(xiàn)，如下圖所示

以 json 的格式呈現(xiàn)數(shù)據(jù)

如果 data 對象的屬性較為復(fù)雜，包括對象和數(shù)組，那需要相應(yīng)的調(diào)整 wxml 文件，可以看下面兩張圖進行理解

較為復(fù)雜的 data 對象

根據(jù) data 對象結(jié)構(gòu)調(diào)整的 wxml

3. 數(shù)據(jù)綁定更新

通過 setData 函數(shù)來進行數(shù)據(jù)綁定，這種方式可以理解為“數(shù)據(jù)更新”，setData 方法位于 Page 對象的原型鏈上：Page.prototype.setData，在大多數(shù)的情況下，我們使用 this.setData 的方式來調(diào)用這個方法

setData 的參數(shù)接受一個對象，以 key 和 value 的形式將 this.data 中的 key 對應(yīng)的值設(shè)置成 value，這句話需要注意兩點：① setData 會改變 this.data 變量里相同 key 的值；② setData 執(zhí)行后會通知邏輯層執(zhí)行 Rerender，并立刻重新渲染視圖

Page({
  data: {
    object: {
      date: "Jan 28 2017"
    },
    title: "小時候的冰棍兒與雪糕",
    postImg: "/images/post/post-4.jpg",
    avatar: "/images/avatar/avatar-5.png",
    content: "冰棍與雪糕絕對不是同一個東西。3到5毛錢的雪糕猶如現(xiàn)在的哈根達斯，而5分1毛的冰棍兒就像現(xiàn)在的老冰棒。時過境遷，...",
    readingNum: 92,
    collectionNum: {
      array: [108]
    },
    commentNum: 7
  },
  onLoad:function(){
    this.setData({
      title: "一根雪糕的經(jīng)濟學原理"
    })
  }
})

運行結(jié)果

可以看到，第一篇文章的標題由 data 里所設(shè)置的 title:"小時候的冰棍兒與雪糕"，被更改成了“一根雪糕的經(jīng)濟學原理”，key 可以使用字符串來表示，可以看下面 3 個例子