微信小程序之入門篇（一）
微信小程序之注冊篇（二）
微信小程序之開發(fā)初體驗（三）——開發(fā)工具使用和目錄結構
微信小程序之生命周期（四）
微信小程序之數(shù)據(jù)綁定（五）
微信小程序之觸控事件（六）
微信小程序之基礎組件篇——視圖容器（七）
微信小程序之基礎組件篇——基礎內容（八）
微信小程序之基礎組件篇——表單組件（九）
微信小程序之基礎組件篇——導航組件（十）
微信小程序之基礎組件篇——媒體組件（十一）
微信小程序之API篇——豆瓣圖書搜索（十二）
微信小程序之拓展篇——weui-wxss（十三）

本篇文章介紹小程序的生命周期，由于小程序分為應用和頁面兩個部分，所以小程序的生命周期就涉及到三個部分，分別是：

• 應用的生命周期
• 頁面的生命周期
• 應用的生命周期對頁面生命周期的影響

一、應用的生命周期

App() 函數(shù)用來注冊一個小程序。接受一個 object 參數(shù)，其指定小程序的生命周期函數(shù)等。

object參數(shù)說明：

前臺、后臺定義： 當用戶點擊左上角關閉，或者按了設備 Home 鍵離開微信，小程序并沒有直接銷毀，而是進入了后臺；當再次進入微信或再次打開小程序，又會從后臺進入前臺。

應用的生命周期

• 用戶首次打開小程序，觸發(fā) onLaunch（全局只觸發(fā)一次）。
• 小程序初始化完成后，觸發(fā)onShow方法，監(jiān)聽小程序顯示。
• 小程序從前臺進入后臺，觸發(fā) onHide方法。
• 小程序從后臺進入前臺顯示，觸發(fā) onShow方法。
• 小程序后臺運行一定時間，或系統(tǒng)資源占用過高，會被銷毀。

示例代碼：

App({
  onLaunch: function() { 
    // Do something initial when launch.
  },
  onShow: function() {
      // Do something when show.
  },
  onHide: function() {
      // Do something when hide.
  },
  onError: function(msg) {
    console.log(msg)
  },
  globalData: 'I am global data'
})

小程序提供了全局的 getApp()函數(shù)，可以獲取到小程序實例。

// other.js
var appInstance = getApp()
console.log(appInstance.globalData) // I am global data

注意：
App() 必須在 app.js 中注冊，且不能注冊多個。

不要在定義于 App() 內的函數(shù)中調用 getApp() ，使用 this 就可以拿到 app 實例。

不要在 onLaunch 的時候調用 getCurrentPage()，此時 page 還沒有生成。

通過 getApp() 獲取實例之后，不要私自調用生命周期函數(shù)。

頁面的生命周期

Page()函數(shù)用來注冊一個頁面。接受一個 object 參數(shù)，其指定頁面的初始數(shù)據(jù)、生命周期函數(shù)、事件處理函數(shù)等。
object 參數(shù)說明：

頁面的生命周期

• 小程序注冊完成后，加載頁面，觸發(fā)onLoad方法。
• 頁面載入后觸發(fā)onShow方法，顯示頁面。
• 首次顯示頁面，會觸發(fā)onReady方法，渲染頁面元素和樣式，一個頁面只會調用一次。
• 當小程序后臺運行或跳轉到其他頁面時，觸發(fā)onHide方法。
• 當小程序有后臺進入到前臺運行或重新進入頁面時，觸發(fā)onShow方法。
• 當使用重定向方法wx.redirectTo(OBJECT)或關閉當前頁返回上一頁wx.navigateBack()，觸發(fā)onUnload。

總結：

• onLoad: 頁面加載。
  1)一個頁面只會調用一次。
  2)參數(shù)可以獲取wx.navigateTo和wx.redirectTo及<navigator/>中的 query。
• onShow: 頁面顯示
  1)每次打開頁面都會調用一次。
• onReady: 頁面初次渲染完成
  1)一個頁面只會調用一次，代表頁面已經(jīng)準備妥當，可以和視圖層進行交互。
  2)對界面的設置如wx.setNavigationBarTitle請在onReady之后設置。詳見生命周期
• onHide: 頁面隱藏
  1)當navigateTo或底部tab切換時調用。
• onUnload: 頁面卸載
  1)當redirectTo或navigateBack的時候調用。

示例代碼：

//index.js
Page({
  data: {
    text: "This is page data."
  },
  onLoad: function(options) {
    // Do some initialize when page load.
  },
  onReady: function() {
    // Do something when page ready.
  },
  onShow: function() {
    // Do something when page show.
  },
  onHide: function() {
    // Do something when page hide.
  },
  onUnload: function() {
    // Do something when page close.
  },
  onPullDownRefresh: function() {
    // Do something when pull down.
  },
  onReachBottom: function() {
    // Do something when page reach bottom.
  },
  onShareAppMessage: function () {
   // return custom share data when user share.
  },
  // Event handler.
  viewTap: function() {
    this.setData({
      text: 'Set some data for updating view.'
    })
  },
  customData: {
    hi: 'MINA'
  }
})

三、用Page 實例說明的頁面的生命周期

頁面的生命周期

由上圖可知，小程序由兩大線程組成：負責界面的視圖線程（view thread）和負責數(shù)據(jù)、服務處理的服務線程（appservice thread），兩者協(xié)同工作，完成小程序頁面生命周期的調用。

視圖線程有四大狀態(tài)：

1. 初始化狀態(tài)：初始化視圖線程所需要的工作，初始化完成后向 “服務線程”發(fā)送初始化完成信號，然后進入等待狀態(tài)，等待服務線程提供初始化數(shù)據(jù)。
2. 首次渲染狀態(tài)：當收到服務線程提供的初始化數(shù)據(jù)后（json和js中的data數(shù)據(jù)），渲染小程序界面，渲染完畢后，發(fā)送“首次渲染完成信號”給服務線程，并將頁面展示給用戶。
3. 持續(xù)渲染狀態(tài)：此時界面線程繼續(xù)一直等待“服務線程”通過this.setdata（）函數(shù)發(fā)送來的界面數(shù)據(jù)，只要收到就重新局部渲染，也因此只要更新數(shù)據(jù)并發(fā)送信號，界面就自動更新。
4. 結束狀態(tài)：頁面被回收或者銷毀、應用被系統(tǒng)回收、銷毀時觸發(fā)。

服務線程五大狀態(tài)：

1. 初始化狀態(tài)：此階段僅啟動服務線程所需的基本功能，比如信號發(fā)送模塊。系統(tǒng)的初始化工作完畢，就調用自定義的onload和onshow，然后等待視圖線程的“視圖線程初始化完成”號。onload是只會首次渲染的時候執(zhí)行一次，onshow是每次界面切換都會執(zhí)行，簡單理解，這就是唯一差別。
2. 等待激活狀態(tài)：接收到“視圖線程初始化完成”信號后，將初始化數(shù)據(jù)發(fā)送給“視圖線程”，等待視圖線程完成初次渲染。
3. 激活狀態(tài)：收到視圖線程發(fā)送來的“首次渲染完成”信號后，就進入激活狀態(tài)既程序的正常運行狀態(tài)，并調用自定義的onReady()函數(shù)。此狀態(tài)下就可以通過 this.setData 函數(shù)發(fā)送界面數(shù)據(jù)給界面線程進行局部渲染，更新頁面。
4. 后臺運行狀態(tài)：如果界面進入后臺，服務線程就進入后臺運行狀態(tài)，從目前的官方解讀來說，這個狀態(tài)挺奇怪的，和激活狀態(tài)是相同的，也可以通過setdata函數(shù)更新界面的。畢竟小程序的框架剛推出，應該后續(xù)會有很大不同吧。
5. 結束狀態(tài)：頁面被回收或者銷毀、應用被系統(tǒng)回收、銷毀時觸發(fā)。

四、應用的生命周期對頁面生命周期的影響

應用生命周期與頁面生命周期之間的關系

• 小程序初始化完成后，頁面首次加載觸發(fā)onLoad，只會觸發(fā)一次。
• 當小程序進入到后臺，先執(zhí)行頁面onHide方法再執(zhí)行應用onHide方法。
• 當小程序從后臺進入到前臺，先執(zhí)行應用onShow方法再執(zhí)行頁面onShow方法。