Unsplash

本次的(de)(de)(de)系列博(bo)文的(de)(de)(de)知識點(dian)講解和代碼，主要(yao)是來自于 七月老師 的(de)(de)(de)書籍(ji)(ji)《微信小程序(xu)開(kai)發(fa)：入門與實(shi)踐(jian)》，由(you)個人總結(jie)并編寫，關于更(geng)多微信小程序(xu)開(kai)發(fa)中的(de)(de)(de)各項技(ji)能(neng)，以(yi)及(ji)常見(jian)問題(ti)的(de)(de)(de)解決方案，還請大家購買書籍(ji)(ji)進行學(xue)習(xi)實(shi)踐(jian)，該系列博(bo)文的(de)(de)(de)發(fa)布已(yi)得(de)到七月老師的(de)(de)(de)授權(quan)許(xu)可

我們(men)在 WeChat 文章列(lie)(lie)表頁(ye)(ye)面(mian)（一(yi)） 中，已經完成了(le)文章列(lie)(lie)表頁(ye)(ye)面(mian)了(le)，效(xiao)果圖如(ru)下所示

文章列表頁面

1. Page 頁面的生命周期

post.js 文件(jian)默(mo)認包含的代(dai)碼(ma)如下(xia)所示

Page({

  /**
   * 頁面的初始數據
   */
  data: {

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  }
})

可(ke)以(yi)看(kan)到，整個(ge)頁面執行了一個(ge) Page({...}) 方法，參數(shu)是一個(ge) Object 對象，用來(lai)指定(ding)頁面的初始數(shu)據 (data)、生命周期函(han)數(shu) (on 開(kai)頭的函(han)數(shu))、事件處(chu)理函(han)數(shu)等

一(yi)個(ge)頁(ye)面從創建(jian)到卸載(zai)(zai)，會經(jing)歷(li)以(yi)下 5 個(ge)周期：加載(zai)(zai)、顯(xian)示(shi)、渲染、隱藏、卸載(zai)(zai)，MINA 框架分別提(ti)供(gong)了 5 個(ge)生(sheng)命周期函(han)數(shu)來監(jian)聽(ting)這 5 個(ge)特定的生(sheng)命周期，以(yi)方便開發者可以(yi)在這些(xie)特定的時刻執行一(yi)些(xie)自己(ji)的代碼邏輯(ji)，它們分別是：

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

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

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

我們接下(xia)(xia)來通(tong)過(guo)控制臺打(da)印的方(fang)式(shi)，來看下(xia)(xia)生命周期(qi)函數及事件處理函數的觸發時機，也(ye)可(ke)以通(tong)過(guo)打(da)斷點(dian)的方(fang)式(shi)，進行調試，具體代碼(ma)如下(xia)(xia)所示：

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:用戶點擊右上角分享");   
  }
})

運行結果

可以看(kan)到(dao)，一個(ge)頁面要正常(chang)顯示，必須經過(guo)以上 3 個(ge)生命周(zhou)期：加載、顯示、渲染，至于(yu) onHide 和 onUnload 函數，以及 3 個(ge)特定事件的處理函數，它們的觸發都需要執行一些 API 操作，這些我(wo)們到(dao)之(zhi)后的部分再做(zuo)介紹

官方文檔(dang)中，也是給出 Page 實例生(sheng)命周(zhou)期的(de)圖(tu)解，同時也告訴(su)我們(men)，以下內容你不需要(yao)立馬完(wan)全弄明(ming)白(bai)，不過以后它會有幫助，所(suo)以在這(zhe)里建議(yi)大家的(de)是，在遇到(dao)問(wen)題或者業務(wu)需要(yao)時，再回(hui)過頭來研究這(zhe)張完(wan)整的(de)生(sheng)命周(zhou)期圖(tu)更有意義

頁面生命周期

2. 數據綁定

在真實項目中，業(ye)務(wu)(wu)數(shu)據(ju)通(tong)(tong)常都放置(zhi)在自己的(de)服(fu)務(wu)(wu)器中，然后通(tong)(tong)過 HTTP 請求(qiu)來訪(fang)問服(fu)務(wu)(wu)器提供的(de) RESTFUI API，從而實現數(shu)據(ju)的(de)獲取(qu)

接下來，我們嘗試將編碼(ma)(ma)在(zai) post.wxml 文件里(li)的(de)數據移植到 post.js 中(zhong)，在(zai) post.js 中(zhong)加(jia)入(ru)一(yi)個(ge)臨(lin)時變量 postData 來模擬(ni)文章(zhang)數據，并將上一(yi)小節(jie)中(zhong)測試生命周期(qi)的(de)代碼(ma)(ma)移除，編寫完成(cheng)后的(de)代碼(ma)(ma)如下：

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
  },
})

如果是(shi)(shi)傳統的網(wang)頁(ye)開發，我們會想到，先獲取 HTML 文檔的 DOM，然后(hou)對 DOM 標簽進行復制，從而實現數(shu)據的顯示(shi)，但在小程序中，是(shi)(shi)沒有 DOM 結構的，無法通過這樣的方(fang)式，將數(shu)據“填充(chong)”到頁(ye)面當中

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

不(bu)同(tong)于(yu) AngularJS 的雙向(xiang)數據(ju)綁定(ding)(ding)，小程序僅實現了單向(xiang)數據(ju)綁定(ding)(ding)，即只(zhi)支(zhi)持從邏輯(ji)層傳遞(di)到渲染層的數據(ju)綁定(ding)(ding)，反之則(ze)不(bu)可(ke)以

小程(cheng)序使用 Page 方法參(can)數(shu)里的 data 變量作為(wei)數(shu)據(ju)(ju)綁定的橋梁，data 里已(yi)經被我們放置了一些數(shu)據(ju)(ju)，這些直(zhi)接寫(xie)在 data 里的數(shu)據(ju)(ju)，被稱為(wei)數(shu)據(ju)(ju)綁定的初始化數(shu)據(ju)(ju)

需要注(zhu)意(yi)的是，數據綁定(ding)有以下兩(liang)種：

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

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

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

運行結果

我們通過(guo)頁面(mian)生命周期圖(tu)解，來解釋(shi)一下(xia)初始化數(shu)據(ju)綁定的過(guo)程，當(dang)頁面(mian)執行(xing)了(le) onShow 函(han)數(shu)后(hou)，邏(luo)輯層(ceng)會收(shou)到一個(ge)通知(zhi) (Notify)；隨后(hou)邏(luo)輯層(ceng)會將(jiang) data 對象(xiang)以 json 的形式發(fa)(fa)送到 View 視圖(tu)層(ceng) (Send Initial Data)，視圖(tu)層(ceng)接受初始化數(shu)據(ju)后(hou)，開始渲染并顯示(shi)初始化數(shu)據(ju) (First Render)，最終將(jiang)數(shu)據(ju)呈現在開發(fa)(fa)者的面(mian)前

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

post 頁面在 AppData 面板中的數據綁定情況

 點擊 Tree 選項，切換成 Code，數據將(jiang)以 json 的(de)形式呈現，如下圖所示(shi)

以 json 的格式呈現數據

如果 data 對象的(de)屬(shu)性(xing)較為復雜(za)，包括對象和(he)數組，那需(xu)要(yao)相應的(de)調整(zheng) wxml 文件，可以看下面(mian)兩(liang)張(zhang)圖進行理(li)解

較為復雜的 data 對象

根據 data 對象結構調整的 wxml

3. 數據綁定更新

通過 setData 函數來(lai)進行數據綁定(ding)，這(zhe)種方(fang)(fang)(fang)式可以理解(jie)為(wei)“數據更(geng)新”，setData 方(fang)(fang)(fang)法(fa)位(wei)于(yu) Page 對(dui)象的(de)(de)原型鏈上：Page.prototype.setData，在大多數的(de)(de)情況(kuang)下，我們使用(yong) this.setData 的(de)(de)方(fang)(fang)(fang)式來(lai)調用(yong)這(zhe)個方(fang)(fang)(fang)法(fa)

 setData 的參(can)數(shu)接受一個對象(xiang)，以 key 和 value 的形式將 this.data 中的 key 對應的值設置成 value，這句話需要注意兩(liang)點：① setData 會改變(bian) this.data 變(bian)量里(li)相同 key 的值；② setData 執行(xing)后會通知(zhi)邏輯層執行(xing) Rerender，并立刻重新(xin)渲染(ran)視(shi)圖

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: "一根雪糕的經濟學原理"
    })
  }
})

運行結果

可(ke)以(yi)(yi)看(kan)(kan)到，第一篇文章的標題(ti)由 data 里所設(she)置(zhi)的 title:"小時候的冰棍兒與(yu)雪糕"，被更改成了“一根(gen)雪糕的經濟(ji)學(xue)原理(li)”，key 可(ke)以(yi)(yi)使用字(zi)符串來表示，可(ke)以(yi)(yi)看(kan)(kan)下面 3 個例子