起源

需求: 每次進入首頁需判斷該用戶身份、若滿足條件則彈窗、若不滿足啥也不干.
現(xiàn)狀: 封裝了用戶身份組件, 具備身份判定、彈窗顯示等邏輯, 調(diào)用方需在onShow時獲取組件實例&調(diào)用實例方法;
弊端: 調(diào)用方需在onShow時獲取組件實例&調(diào)用實例方法、假設我有100個頁面都需要引入該組件, 那么100個頁面都需這么寫??

秉承"懶人"原則、尋找優(yōu)化方案

改進: Component原來有pageLifetimes屬性, 組件的頁面所在的生命周期Api, 可完美解決調(diào)用方需要手動調(diào)用的問題.

接下來就圍繞微信小程序的生命周期做個簡單分析.

1.1 小程序App生命周期

先來上一張總結(jié)的圖哈: 

 下面會結(jié)合Demo做個簡單演示:

// App.js
// 注冊小程序、接受一個Object參數(shù)、指定小程序的生命周期回調(diào)等
App({
  // 小程序初始化完成時觸發(fā)，全局只觸發(fā)一次
  onLaunch: function (options) {
    console.log('app >>> onLaunch, options:', options);
  },
  // 小程序啟動，或從后臺進入前臺顯示時觸發(fā)
  onShow: function(options){
    console.log('app >>> onShow, options:', options);
  },
  // 小程序從前臺進入后臺時觸發(fā)
  onHide: function(){
    console.log('app >>> onHide');
  },
})
復制代碼

當啟動小程序時, 在微信開發(fā)者工具-> 控制臺可以打印如下信息:

總結(jié): App(Object object)

App(Object object)
注冊小程序。接受一個 Object 參數(shù)，其指定小程序的生命周期回調(diào)等.
生命周期應用場景:
①. onLaunch
"重置"操作: 清除storage緩存信息...
初始化數(shù)據(jù): 獲取設備相關信息并存儲在globalData or storage中...
others...
②. onShow
版本更新: UpdateManager管理更新、實現(xiàn)小程序有新版本時、客戶端主動觸發(fā)下載、提升體驗;
others...

1.2 頁面生命周期

// Page js
Page({
  // 頁面加載時觸發(fā)。一個頁面只會調(diào)用一次，可以在 onLoad 的參數(shù)中獲取打開當前頁面路徑中的參數(shù)
  onLoad: function (options) {
    console.log('page >>> onLoad, options:', options);
  },
  // 頁面初次渲染完成時觸發(fā)。一個頁面只會調(diào)用一次，代表頁面已經(jīng)準備妥當，可以和視圖層進行交互。
  onReady: function () {
    console.log('page >>> onReady, options:');
  },
  // 頁面顯示/切入前臺時觸發(fā)
  onShow: function () {
    console.log('page >>> onShow, options:');
  },
  // 頁面隱藏/切入后臺時觸發(fā)。 如 wx.navigateTo 或底部 tab 切換到其他頁面，小程序切入后臺等。
  onHide: function(){
    console.log('page >>> onHide, options:');
  },
  // 頁面卸載時觸發(fā)。如wx.redirectTo或wx.navigateBack到其他頁面時。
  onUnload(){
    console.log('page >>> onUnload, options:');
  }
})
復制代碼

看看初始化進入, 微信開發(fā)者工具-> 控制臺打印的信息如下:

總結(jié): Page(Object object)

Page(Object object)
注冊小程序中的一個頁面。接受一個 Object 類型參數(shù)，其指定頁面的初始數(shù)據(jù)、生命周期回調(diào)、事件處理函數(shù)等。
生命周期應用場景:
①. onLoad:
獲取頁面參數(shù): 可通過options屬性獲取;
初始化頁面數(shù)據(jù): 可發(fā)請求;
others...
②. onShow:
涉及到頁面顯示必須走的邏輯判定: eg>>> 文章開頭的起源介紹, 像此類跟用戶身份密切相關的邏輯, 最好實時判定.
others...
③. onHide:
eg: 電商產(chǎn)品頁面埋點, 需要在頁面顯示/隱藏的時候上報相關參數(shù)信息, 便于對用戶行為做分析.
④. onReady:
eg: 在Page中引入組件A, 想要獲取組件A實例的方法或者數(shù)據(jù), 可以在onReady回調(diào)中獲取該實例對象ARef, 這樣就可確保實例初始化完成&可多處共用該實例

// Page wxml
<v-tips id="v_tips"><vtips>
// Page js
onReady: function () {
  // 掛載控件
  this.vTips = this.selectComponent('#v_tips');
},
// 使用
onTabItem: function(){
 this.vTips && this.vTips.xxx();
}
復制代碼

1.3 組件生命周期

場景: Page中包含login、register2個子組件.
啟動小程序, 微信開發(fā)者工具-> 控制臺打印的信息如下: 結(jié)合圖形分析分各生命周期之間的關系:
若在頁面點擊跳轉(zhuǎn)，生命周期又是如何觸發(fā)的呢?? 請看下圖:

總結(jié)

若涉及到頁面銷毀、則會觸發(fā)頁面的onUnload + 組件的detached();
若只涉及到頁面的隱藏、則觸發(fā)頁面的onHide + 組件的hide();

最后

個人基于對生命周期的了解, 做了簡單的分析, 若有不對的地方, 還請各位大佬們評論區(qū)多多指正.