[轉] 微信小程式之生命週期
阿新 • • 發佈：2018-12-15
本篇文章介紹小程式的生命週期，由於小程式分為應用和頁面兩個部分，所以小程式的生命週期就涉及到三個部分，分別是：
- 應用的生命週期
- 頁面的生命週期
- 應用的生命週期對頁面生命週期的影響
一、應用的生命週期
App() 函式用來註冊一個小程式。接受一個 object 引數，其指定小程式的生命週期函式等。
object引數說明：
| 屬性 | 型別 | 描述 | 觸發時機 |
|---|---|---|---|
| onLaunch | Function | 生命週期函式--監聽小程式初始化 | 當小程式初始化完成時，會觸發 onLaunch（全域性只觸發一次） |
| onShow | Function | 生命週期函式--監聽小程式顯示 | 當小程式啟動，或從後臺進入前臺顯示，會觸發 onShow |
| onHide | Function | 生命週期函式--監聽小程式隱藏 | 當小程式從前臺進入後臺，會觸發 onHide |
前臺、後臺定義： 當用戶點選左上角關閉，或者按了裝置 Home 鍵離開微信，小程式並沒有直接銷燬，而是進入了後臺；當再次進入微信或再次開啟小程式，又會從後臺進入前臺。
應用的生命週期
- 使用者首次開啟小程式，觸發 onLaunch（全域性只觸發一次）。
- 小程式初始化完成後，觸發onShow方法，監聽小程式顯示。
- 小程式從前臺進入後臺，觸發 onHide方法。
- 小程式從後臺進入前臺顯示，觸發 onShow方法。
- 小程式後臺執行一定時間，或系統資源佔用過高，會被銷燬。
示例程式碼：
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()函式，可以獲取到小程式例項。
// other.js
var appInstance = getApp()
console.log(appInstance.globalData) // I am global data
注意：
App() 必須在 app.js 中註冊，且不能註冊多個。
不要在定義於 App() 內的函式中呼叫 getApp() ，使用 this 就可以拿到 app 例項。
不要在 onLaunch 的時候呼叫 getCurrentPage()，此時 page 還沒有生成。
通過 getApp() 獲取例項之後，不要私自呼叫生命週期函式。
頁面的生命週期
Page()函式用來註冊一個頁面。接受一個 object 引數，其指定頁面的初始資料、生命週期函式、事件處理函式等。
object 引數說明：
| 屬性 | 型別 | 描述 |
|---|---|---|
| data | Object | 頁面的初始資料 |
| onLoad | Function | 生命週期函式--監聽頁面載入 |
| onReady | Function | 生命週期函式--監聽頁面初次渲染完成 |
| onShow | Function | 生命週期函式--監聽頁面顯示 |
| onHide | Function | 生命週期函式--監聽頁面隱藏 |
| onUnload | Function | 生命週期函式--監聽頁面解除安裝 |
頁面的生命週期
- 小程式註冊完成後，載入頁面，觸發onLoad方法。
- 頁面載入後觸發onShow方法，顯示頁面。
- 首次顯示頁面，會觸發onReady方法，渲染頁面元素和樣式，一個頁面只會呼叫一次。
- 當小程式後臺執行或跳轉到其他頁面時，觸發onHide方法。
- 當小程式有後臺進入到前臺執行或重新進入頁面時，觸發onShow方法。
- 當使用重定向方法wx.redirectTo(OBJECT)或關閉當前頁返回上一頁wx.navigateBack()，觸發onUnload。
總結：
- onLoad: 頁面載入。
1)一個頁面只會呼叫一次。
2)引數可以獲取wx.navigateTo和wx.redirectTo及<navigator/>中的 query。- onShow: 頁面顯示
1)每次開啟頁面都會呼叫一次。- onReady: 頁面初次渲染完成
1)一個頁面只會呼叫一次，代表頁面已經準備妥當，可以和檢視層進行互動。
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）和負責資料、服務處理的服務執行緒（appservice thread），兩者協同工作，完成小程式頁面生命週期的呼叫。
檢視執行緒有四大狀態：
- 初始化狀態：初始化檢視執行緒所需要的工作，初始化完成後向 “服務執行緒”傳送初始化完成訊號，然後進入等待狀態，等待服務執行緒提供初始化資料。
- 首次渲染狀態：當收到服務執行緒提供的初始化資料後（json和js中的data資料），渲染小程式介面，渲染完畢後，傳送“首次渲染完成訊號”給服務執行緒，並將頁面展示給使用者。
- 持續渲染狀態：此時介面執行緒繼續一直等待“服務執行緒”通過this.setdata（）函式傳送來的介面資料，只要收到就重新區域性渲染，也因此只要更新資料併發送訊號，介面就自動更新。
- 結束狀態：頁面被回收或者銷燬、應用被系統回收、銷燬時觸發。
服務執行緒五大狀態：
- 初始化狀態：此階段僅啟動服務執行緒所需的基本功能，比如訊號傳送模組。系統的初始化工作完畢，就呼叫自定義的onload和onshow，然後等待檢視執行緒的“檢視執行緒初始化完成”號。onload是隻會首次渲染的時候執行一次，onshow是每次介面切換都會執行，簡單理解，這就是唯一差別。
- 等待啟用狀態：接收到“檢視執行緒初始化完成”訊號後，將初始化資料傳送給“檢視執行緒”，等待檢視執行緒完成初次渲染。
- 啟用狀態：收到檢視執行緒傳送來的“首次渲染完成”訊號後，就進入啟用狀態既程式的正常執行狀態，並呼叫自定義的onReady()函式。此狀態下就可以通過 this.setData 函式傳送介面資料給介面執行緒進行區域性渲染，更新頁面。
- 後臺執行狀態：如果介面進入後臺，服務執行緒就進入後臺執行狀態，從目前的官方解讀來說，這個狀態挺奇怪的，和啟用狀態是相同的，也可以通過setdata函式更新介面的。畢竟小程式的框架剛推出，應該後續會有很大不同吧。
- 結束狀態：頁面被回收或者銷燬、應用被系統回收、銷燬時觸發。
四、應用的生命週期對頁面生命週期的影響
應用生命週期與頁面生命週期之間的關係
- 小程式初始化完成後，頁面首次載入觸發onLoad，只會觸發一次。
- 當小程式進入到後臺，先執行頁面onHide方法再執行應用onHide方法。
- 當小程式從後臺進入到前臺，先執行應用onShow方法再執行頁面onShow方法。
連結：https://www.jianshu.com/p/0078507e14d3