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

?

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

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

object參數(shù)說明：

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

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

?

?

?

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

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

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

·?小程序從前臺進入后臺，觸發(fā)?onHide方法。

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

·?小程序后臺運行一定時間，或系統(tǒng)資源占用過高，會被銷毀。

示例代碼：

App({

??onLaunch:?function()?{

//?首次打開

},

??onShow:?function()?{

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

??},

??onHide:?function()?{

??????// 小程序從前臺進入后臺

??},

??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 中注冊，且不能注冊多個。

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

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

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

頁面的生命周期

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

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

?

?

?

頁面的生命周期

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

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

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

·?當小程序后臺運行或跳轉(zhuǎn)到其他頁面時，觸發(fā)onHide方法。

·?當小程序有后臺進入到前臺運行或重新進入頁面時，觸發(fā)onShow方法。

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

總結(jié)：

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

·?onShow: 頁面顯示1)每次打開頁面都會調(diào)用一次。

·?onReady: 頁面初次渲染完成1)一個頁面只會調(diào)用一次，代表頁面已經(jīng)準備妥當，可以和視圖層進行交互。2)對界面的設(shè)置如wx.setNavigationBarTitle請在onReady之后設(shè)置。

?

·?onHide: 頁面隱藏1)當navigateTo或底部tab切換時調(diào)用。

·?onUnload: 頁面卸載1)當redirectTo或navigateBack的時候調(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 實例說明的頁面的生命周期

頁面的生命周期

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

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

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

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

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

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

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

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

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

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

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

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

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

?

?

?

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

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

·?當小程序進入到后臺，先執(zhí)行頁面onHide方法再執(zhí)行應(yīng)用onHide方法。

·?當小程序從后臺進入到前臺，先執(zhí)行應(yīng)用onShow方法再執(zhí)行頁面onShow方法。

?

?

?

?

?

?

- End -

?

?

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

期待您的加入

▽

?

?

?

?

?

?