由于小程序分為應(yīng)用和頁面兩個(gè)部分，所以小程序的生命周期就涉及到以下部分。

分別是：

• 應(yīng)用的生命周期。
• 頁面的生命周期。
• 應(yīng)用的生命周期對頁面生命周期的影響。
• 路由變化對頁面生命周期的影響。

一、應(yīng)用的生命周期

前臺(tái)、后臺(tái)定義： 當(dāng)用戶點(diǎn)擊左上角關(guān)閉，或者按了設(shè)備 Home 鍵離開微信，小程序并沒有直接銷毀，而是進(jìn)入了后臺(tái)；當(dāng)再次進(jìn)入微信或再次打開小程序，又會(huì)從后臺(tái)進(jìn)入前臺(tái)。

應(yīng)用的生命周期

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

示例代碼：

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ù)，可以獲取到小程序?qū)嵗?/p>

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

注意：
1、App() 必須在 app.js 中注冊，且不能注冊多個(gè)。
2、不要在定義于 App() 內(nèi)的函數(shù)中調(diào)用 getApp() ，使用 this 就可以拿到 app 實(shí)例。
3、不要在 onLaunch 的時(shí)候調(diào)用 getCurrentPage()，此時(shí) page 還沒有生成。
4、通過 getApp() 獲取實(shí)例之后，不要私自調(diào)用生命周期函數(shù)。

二、頁面生命周期

頁面生命周期

1、小程序注冊完成后，加載頁面，觸發(fā) onLoad 方法。
2、頁面載入后觸發(fā) onShow 方法，顯示頁面。
3、首次顯示頁面，會(huì)觸發(fā) onReady 方法，渲染頁面元素和樣式，一個(gè)頁面只會(huì)調(diào)用一次。
4、當(dāng)小程序后臺(tái)運(yùn)行或跳轉(zhuǎn)到其他頁面時(shí)，觸發(fā) onHide 方法。
5、當(dāng)小程序有后臺(tái)進(jìn)入到前臺(tái)運(yùn)行或重新進(jìn)入頁面時(shí)，觸發(fā) onShow 方法。
6、當(dāng)使用重定向方法 wx.redirectTo(OBJECT) 或關(guān)閉當(dāng)前頁返回上一頁 wx.navigateBack()，觸發(fā) onUnload。

總結(jié)：
1、onLoad: 頁面加載。
a、一個(gè)頁面只會(huì)調(diào)用一次。
b、參數(shù)可以獲取wx.navigateTo和wx.redirectTo及<navigator/>中的 query。
2、onShow: 頁面顯示。
a、每次打開頁面都會(huì)調(diào)用一次。
3、onReady: 頁面初次渲染完成。
a、一個(gè)頁面只會(huì)調(diào)用一次，代表頁面已經(jīng)準(zhǔn)備妥當(dāng)，可以和視圖層進(jìn)行交互。
b、對界面的設(shè)置如wx.setNavigationBarTitle請?jiān)趏nReady之后設(shè)置。詳見生命周期
4、onHide: 頁面隱藏。
a、當(dāng)navigateTo或底部tab切換時(shí)調(diào)用。
5、onUnload: 頁面卸載。
a、當(dāng)redirectTo或navigateBack的時(shí)候調(diào)用。

示例代碼：

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

三、應(yīng)用生命周期影響頁面生命周期

1、小程序初始化完成后，頁面首次加載觸發(fā)onLoad，只會(huì)觸發(fā)一次。
2、當(dāng)小程序進(jìn)入到后臺(tái)，先執(zhí)行頁面onHide方法再執(zhí)行應(yīng)用onHide方法。
3、當(dāng)小程序從后臺(tái)進(jìn)入到前臺(tái)，先執(zhí)行應(yīng)用onShow方法再執(zhí)行頁面onShow方法。

四、路由變化對頁面生命周期的影響

1、在小程序中所有頁面的路由全部由框架進(jìn)行管理，框架以棧的形式維護(hù)當(dāng)前的所有頁面，當(dāng)發(fā)生路由切換的時(shí)候，頁面棧的表現(xiàn)如下：

2、對于路由的觸發(fā)方式以及頁面生命周期函數(shù)如下：

3、Tab 切換對應(yīng)的生命周期（以 A、B 頁面為 Tabbar 頁面，C 是從 A 頁面打開的頁面，D 頁面是從 C 頁面打開的頁面為例）：

五、通過實(shí)例我們一起理解一下官方的小程序頁面的生命周期：