小程序生命周期（3）
2021-08-05 18:25:34

?

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

App()?函數(shù)用來(lái)注冊(cè)一個(gè)小程序。接受一個(gè)?object?參數(shù)，其指定小程序的生命周期函數(shù)等。

object參數(shù)說(shuō)明：

屬性	類型	描述	觸發(fā)時(shí)機(jī)
onLaunch	Function	生命周期函數(shù)--監(jiān)聽(tīng)小程序初始化	當(dāng)小程序初始化完成時(shí)，會(huì)觸發(fā) onLaunch（全局只觸發(fā)一次）
onShow	Function	生命周期函數(shù)--監(jiān)聽(tīng)小程序顯示	當(dāng)小程序啟動(dòng)，或從后臺(tái)進(jìn)入前臺(tái)顯示，會(huì)觸發(fā) onShow
onHide	Function	生命周期函數(shù)--監(jiān)聽(tīng)小程序隱藏	當(dāng)小程序從前臺(tái)進(jìn)入后臺(tái)，會(huì)觸發(fā) onHide

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

?

?

?

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

·?用戶首次打開(kāi)小程序，觸發(fā)?onLaunch（全局只觸發(fā)一次）。

·?小程序初始化完成后，觸發(fā)onShow方法，監(jiān)聽(tīng)小程序顯示。

·?小程序從前臺(tái)進(jìn)入后臺(tái)，觸發(fā)?onHide方法。

·?小程序從后臺(tái)進(jìn)入前臺(tái)顯示，觸發(fā)?onShow方法。

·?小程序后臺(tái)運(yùn)行一定時(shí)間，或系統(tǒng)資源占用過(guò)高，會(huì)被銷毀。

示例代碼：

App({

??onLaunch:?function()?{

//?首次打開(kāi)

},

??onShow:?function()?{

??????//小程序初始化完成后

??},

??onHide:?function()?{

??????// 小程序從前臺(tái)進(jìn)入后臺(tái)

??},

??onError:?function(msg)?{

????console.log(msg)

??},

??globalData:?'global data'

})

小程序提供了全局的?getApp()函數(shù)，可以獲取到小程序?qū)嵗?/span>

// other.jsvar?appInstance = getApp()console.log(appInstance.globalData)?// I am global data

注意：App() 必須在 app.js 中注冊(cè)，且不能注冊(cè)多個(gè)。

不要在定義于?App() 內(nèi)的函數(shù)中調(diào)用 getApp() ，使用 this 就可以拿到 app 實(shí)例。

不要在?onLaunch 的時(shí)候調(diào)用 getCurrentPage()，此時(shí) page 還沒(méi)有生成。

通過(guò)?getApp() 獲取實(shí)例之后，不要私自調(diào)用生命周期函數(shù)。

頁(yè)面的生命周期

Page()函數(shù)用來(lái)注冊(cè)一個(gè)頁(yè)面。接受一個(gè)?object?參數(shù)，其指定頁(yè)面的初始數(shù)據(jù)、生命周期函數(shù)、事件處理函數(shù)等。object?參數(shù)說(shuō)明：

屬性	類型	描述
data	Object	頁(yè)面的初始數(shù)據(jù)
onLoad	Function	生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
onReady	Function	生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面初次渲染完成
onShow	Function	生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面顯示
onHide	Function	生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面隱藏
onUnload	Function	生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面卸載

?

?

?

頁(yè)面的生命周期

·?小程序注冊(cè)完成后，加載頁(yè)面，觸發(fā)onLoad方法。

·?頁(yè)面載入后觸發(fā)onShow方法，顯示頁(yè)面。

·?首次顯示頁(yè)面，會(huì)觸發(fā)onReady方法，渲染頁(yè)面元素和樣式，一個(gè)頁(yè)面只會(huì)調(diào)用一次。

·?當(dāng)小程序后臺(tái)運(yùn)行或跳轉(zhuǎn)到其他頁(yè)面時(shí)，觸發(fā)onHide方法。

·?當(dāng)小程序有后臺(tái)進(jìn)入到前臺(tái)運(yùn)行或重新進(jìn)入頁(yè)面時(shí)，觸發(fā)onShow方法。

·?當(dāng)使用重定向方法wx.redirectTo(OBJECT)或關(guān)閉當(dāng)前頁(yè)返回上一頁(yè)wx.navigateBack()，觸發(fā)onUnload。

總結(jié)：

·?onLoad: 頁(yè)面加載。1)一個(gè)頁(yè)面只會(huì)調(diào)用一次。2)參數(shù)可以獲取wx.navigateTo和wx.redirectTo及<navigator/>中的 query。

·?onShow: 頁(yè)面顯示1)每次打開(kāi)頁(yè)面都會(huì)調(diào)用一次。

·?onReady: 頁(yè)面初次渲染完成1)一個(gè)頁(yè)面只會(huì)調(diào)用一次，代表頁(yè)面已經(jīng)準(zhǔn)備妥當(dāng)，可以和視圖層進(jìn)行交互。2)對(duì)界面的設(shè)置如wx.setNavigationBarTitle請(qǐng)?jiān)趏nReady之后設(shè)置。

?

·?onHide: 頁(yè)面隱藏1)當(dāng)navigateTo或底部tab切換時(shí)調(diào)用。

·?onUnload: 頁(yè)面卸載1)當(dāng)redirectTo或navigateBack的時(shí)候調(diào)用。

示例代碼：

//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 實(shí)例說(shuō)明的頁(yè)面的生命周期

頁(yè)面的生命周期

小程序由兩大線程組成：負(fù)責(zé)界面的視圖線程（view thread）和負(fù)責(zé)數(shù)據(jù)、服務(wù)處理的服務(wù)線程（appservice thread），兩者協(xié)同工作，完成小程序頁(yè)面生命周期的調(diào)用。

視圖線程有四大狀態(tài)：

1.?初始化狀態(tài)：初始化視圖線程所需要的工作，初始化完成后向?“服務(wù)線程”發(fā)送初始化完成信號(hào)，然后進(jìn)入等待狀態(tài)，等待服務(wù)線程提供初始化數(shù)據(jù)。

2.?首次渲染狀態(tài)：當(dāng)收到服務(wù)線程提供的初始化數(shù)據(jù)后（json和js中的data數(shù)據(jù)），渲染小程序界面，渲染完畢后，發(fā)送“首次渲染完成信號(hào)”給服務(wù)線程，并將頁(yè)面展示給用戶。

3.?持續(xù)渲染狀態(tài)：此時(shí)界面線程繼續(xù)一直等待“服務(wù)線程”通過(guò)this.setdata（）函數(shù)發(fā)送來(lái)的界面數(shù)據(jù)，只要收到就重新局部渲染，也因此只要更新數(shù)據(jù)并發(fā)送信號(hào)，界面就自動(dòng)更新。

4.?結(jié)束狀態(tài)：頁(yè)面被回收或者銷毀、應(yīng)用被系統(tǒng)回收、銷毀時(shí)觸發(fā)。

服務(wù)線程五大狀態(tài)：

1.?初始化狀態(tài)：此階段僅啟動(dòng)服務(wù)線程所需的基本功能，比如信號(hào)發(fā)送模塊。系統(tǒng)的初始化工作完畢，就調(diào)用自定義的onload和onshow，然后等待視圖線程的“視圖線程初始化完成”號(hào)。onload是只會(huì)首次渲染的時(shí)候執(zhí)行一次，onshow是每次界面切換都會(huì)執(zhí)行，簡(jiǎn)單理解，這就是唯一差別。

2.?等待激活狀態(tài)：接收到“視圖線程初始化完成”信號(hào)后，將初始化數(shù)據(jù)發(fā)送給“視圖線程”，等待視圖線程完成初次渲染。

3.?激活狀態(tài)：收到視圖線程發(fā)送來(lái)的“首次渲染完成”信號(hào)后，就進(jìn)入激活狀態(tài)既程序的正常運(yùn)行狀態(tài)，并調(diào)用自定義的onReady()函數(shù)。此狀態(tài)下就可以通過(guò)?this.setData?函數(shù)發(fā)送界面數(shù)據(jù)給界面線程進(jìn)行局部渲染，更新頁(yè)面。

4.?后臺(tái)運(yùn)行狀態(tài)：如果界面進(jìn)入后臺(tái)，服務(wù)線程就進(jìn)入后臺(tái)運(yùn)行狀態(tài)，從目前的官方解讀來(lái)說(shuō)，這個(gè)狀態(tài)挺奇怪的，和激活狀態(tài)是相同的，也可以通過(guò)setdata函數(shù)更新界面的。畢竟小程序的框架剛推出，應(yīng)該后續(xù)會(huì)有很大不同吧。

5.?結(jié)束狀態(tài)：頁(yè)面被回收或者銷毀、應(yīng)用被系統(tǒng)回收、銷毀時(shí)觸發(fā)。

四、應(yīng)用的生命周期對(duì)頁(yè)面生命周期的影響

?

?

?

應(yīng)用生命周期與頁(yè)面生命周期之間的關(guān)系

·?小程序初始化完成后，頁(yè)面首次加載觸發(fā)onLoad，只會(huì)觸發(fā)一次。

·?當(dāng)小程序進(jìn)入到后臺(tái)，先執(zhí)行頁(yè)面onHide方法再執(zhí)行應(yīng)用onHide方法。

·?當(dāng)小程序從后臺(tái)進(jìn)入到前臺(tái)，先執(zhí)行應(yīng)用onShow方法再執(zhí)行頁(yè)面onShow方法。

?

?

?

?

?

?

- End -

?

?

長(zhǎng)按二維碼關(guān)注

期待您的加入

▽

?

?

?

?

?

?