[轉] 微信小程式之生命週期
阿新 • • 發佈: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