?
? 一、應用的生命周期App()?函數用來注冊一個小程序。接受一個?object?參數,其指定小程序的生命周期函數等。
object參數說明:
屬性 |
類型 |
描述 |
觸發時機 |
onLaunch |
Function |
生命周期函數--監聽小程序初始化 |
當小程序初始化完成時,會觸發 onLaunch(全局只觸發一次) |
onShow |
Function |
生命周期函數--監聽小程序顯示 |
當小程序啟動,或從后臺進入前臺顯示,會觸發 onShow |
onHide |
Function |
生命周期函數--監聽小程序隱藏 |
當小程序從前臺進入后臺,會觸發 onHide |
前臺、后臺定義:?當用戶點擊左上角關閉,或者按了設備?Home?鍵離開微信,小程序并沒有直接銷毀,而是進入了后臺;當再次進入微信或再次打開小程序,又會從后臺進入前臺。
?
?
?
應用的生命周期
·?用戶首次打開小程序,觸發?onLaunch(全局只觸發一次)。
·?小程序初始化完成后,觸發onShow方法,監聽小程序顯示。
·?小程序從前臺進入后臺,觸發?onHide方法。
·?小程序從后臺進入前臺顯示,觸發?onShow方法。
·?小程序后臺運行一定時間,或系統資源占用過高,會被銷毀。
示例代碼:
App({
??onLaunch:?function()?{
//?首次打開
},
??onShow:?function()?{
??????//小程序初始化完成后
??},
??onHide:?function()?{
??????// 小程序從前臺進入后臺
??},
??onError:?function(msg)?{
????console.log(msg)
??},
??globalData:?'global data'
})
小程序提供了全局的?getApp()函數,可以獲取到小程序實例。
// other.jsvar?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)?{
????// some initialize when page load.
??},
??onReady:?function()?{
????// something when page ready.
??},
??onShow:?function()?{
????// something when page show.
??},
??onHide:?function()?{
????// something when page hide.
??},
??onUnload:?function()?{
????// something when page close.
??},
??onPullDownRefresh:?function()?{
????// something when pull down.
??},
??onReachBottom:?function()?{
????// something when page reach bottom.
??},
??onShareAppMessage:?function ()?{
???// share data when user share.
??},
??// Event handler.
??viewTap:?function()?{
????this.setData({
??????text:?'updating view.'
????})
??},
??customData: {
????Name:?'name'
??}
})
三、用Page 實例說明的頁面的生命周期頁面的生命周期
小程序由兩大線程組成:負責界面的視圖線程(view thread)和負責數據、服務處理的服務線程(appservice thread),兩者協同工作,完成小程序頁面生命周期的調用。
視圖線程有四大狀態:
1.?初始化狀態:初始化視圖線程所需要的工作,初始化完成后向?“服務線程”發送初始化完成信號,然后進入等待狀態,等待服務線程提供初始化數據。
2.?首次渲染狀態:當收到服務線程提供的初始化數據后(json和js中的data數據),渲染小程序界面,渲染完畢后,發送“首次渲染完成信號”給服務線程,并將頁面展示給用戶。
3.?持續渲染狀態:此時界面線程繼續一直等待“服務線程”通過this.setdata()函數發送來的界面數據,只要收到就重新局部渲染,也因此只要更新數據并發送信號,界面就自動更新。
4.?結束狀態:頁面被回收或者銷毀、應用被系統回收、銷毀時觸發。
服務線程五大狀態:
1.?初始化狀態:此階段僅啟動服務線程所需的基本功能,比如信號發送模塊。系統的初始化工作完畢,就調用自定義的onload和onshow,然后等待視圖線程的“視圖線程初始化完成”號。onload是只會首次渲染的時候執行一次,onshow是每次界面切換都會執行,簡單理解,這就是唯一差別。
2.?等待激活狀態:接收到“視圖線程初始化完成”信號后,將初始化數據發送給“視圖線程”,等待視圖線程完成初次渲染。
3.?激活狀態:收到視圖線程發送來的“首次渲染完成”信號后,就進入激活狀態既程序的正常運行狀態,并調用自定義的onReady()函數。此狀態下就可以通過?this.setData?函數發送界面數據給界面線程進行局部渲染,更新頁面。
4.?后臺運行狀態:如果界面進入后臺,服務線程就進入后臺運行狀態,從目前的官方解讀來說,這個狀態挺奇怪的,和激活狀態是相同的,也可以通過setdata函數更新界面的。畢竟小程序的框架剛推出,應該后續會有很大不同吧。
5.?結束狀態:頁面被回收或者銷毀、應用被系統回收、銷毀時觸發。
四、應用的生命周期對頁面生命周期的影響?
?
?
應用生命周期與頁面生命周期之間的關系
·?小程序初始化完成后,頁面首次加載觸發onLoad,只會觸發一次。
·?當小程序進入到后臺,先執行頁面onHide方法再執行應用onHide方法。
·?當小程序從后臺進入到前臺,先執行應用onShow方法再執行頁面onShow方法。
?
?
?
?
?
?
- End -
?
?
長按二維碼關注
期待您的加入
▽
?
?
?
?
?
?
本文摘自 :https://blog.51cto.com/u