微信小程序生命周期

 

 

 

一、是什么

跟vue、react框架一樣，微信小程序框架也存在生命周期，實質也是一堆會在特定時期執行的函數

小程序中，生命周期主要分成了三部分：

• 應用的生命周期
• 頁面的生命周期
• 組件的生命周期

應用的生命周期

小程序的生命周期函數是在app.js里面調用的，通過App(Object)函數用來注冊一個小程序，指定其小程序的生命周期回調

頁面的生命周期

頁面生命周期函數就是當你每進入/切換到一個新的頁面的時候，就會調用的生命周期函數，同樣通過App(Object)函數用來注冊一個頁面

組件的生命周期

組件的生命周期，指的是組件自身的一些函數，這些函數在特殊的時間點或遇到一些特殊的框架事件時被自動觸發，通過Component(Object)進行注冊組件

二、有哪些

應用的生命周期

生命周期	說明
onLaunch	小程序初始化完成時觸發，全局只觸發一次
onShow	小程序啟動，或從后台進入前台顯示時觸發
onHide	小程序從前台進入后台時觸發
onError	小程序發生腳本錯誤或 API 調用報錯時觸發
onPageNotFound	小程序要打開的頁面不存在時觸發
onUnhandledRejection()	小程序有未處理的 Promise 拒絕時觸發
onThemeChange	系統切換主題時觸發

頁面的生命周期

生命周期	說明	作用
onLoad	生命周期回調—監聽頁面加載	發送請求獲取數據
onShow	生命周期回調—監聽頁面顯示	請求數據
onReady	生命周期回調—監聽頁面初次渲染完成	獲取頁面元素（少用）
onHide	生命周期回調—監聽頁面隱藏	終止任務，如定時器或者播放音樂
onUnload	生命周期回調—監聽頁面卸載	終止任務

組件的生命周期

生命周期	說明
created	生命周期回調—監聽頁面加載
attached	生命周期回調—監聽頁面顯示
ready	生命周期回調—監聽頁面初次渲染完成
moved	生命周期回調—監聽頁面隱藏
detached	生命周期回調—監聽頁面卸載
error	每當組件方法拋出錯誤時執行

注意的是：

• 組件實例剛剛被創建好時， created 生命周期被觸發，此時，組件數據 this.data 就是在 Component  構造器中定義的數據 data ， 此時不能調用 setData
• 在組件完全初始化完畢、進入頁面節點樹后， attached 生命周期被觸發。此時， this.data 已被初始化為組件的當前值。這個生命周期很有用，絕大多數初始化工作可以在這個時機進行
• 在組件離開頁面節點樹后， detached 生命周期被觸發。退出一個頁面時，如果組件還在頁面節點樹中，則  detached 會被觸發

還有一些特殊的生命周期，它們並非與組件有很強的關聯，但有時組件需要獲知，以便組件內部處理，這樣的生命周期稱為“組件所在頁面的生命周期”，在 pageLifetimes 定義段中定義，如下：

生命周期	說明
show	組件所在的頁面被展示時執行
hide	組件所在的頁面被隱藏時執行

代碼如下：

Component({
  pageLifetimes: {
    show: function() {
      // 頁面被展示
 }, hide: function() { // 頁面被隱藏  }, } })

 三、執行過程

應⽤的⽣命周期執行過程：

• ⽤戶⾸次打開⼩程序，觸發 onLaunch（全局只觸發⼀次）

• ⼩程序初始化完成后，觸發onShow⽅法，監聽⼩程序顯示

• ⼩程序從前台進⼊后台，觸發 onHide⽅法

• ⼩程序從后台進⼊前台顯示，觸發 onShow⽅法

• ⼩程序后台運⾏⼀定時間，或系統資源占⽤過⾼，會被銷毀

⻚⾯⽣命周期的執行過程：

• ⼩程序注冊完成后，加載⻚⾯，觸發onLoad⽅法
• ⻚⾯載⼊后觸發onShow⽅法，顯示⻚⾯
• ⾸次顯示⻚⾯，會觸發onReady⽅法，渲染⻚⾯元素和樣式，⼀個⻚⾯只會調⽤⼀次
• 當⼩程序后台運⾏或跳轉到其他⻚⾯時，觸發onHide⽅法
• 當⼩程序有后台進⼊到前台運⾏或重新進⼊⻚⾯時，觸發onShow⽅法
• 當使⽤重定向⽅法 wx.redirectTo() 或關閉當前⻚返回上⼀⻚wx.navigateBack()，觸發onUnload

當存在也應用生命周期和頁面周期的時候，相關的執行順序如下：

• 打開小程序：(App)onLaunch --> (App)onShow --> (Pages)onLoad --> (Pages)onShow --> (pages)onRead

• 進入下一個頁面：(Pages)onHide --> (Next)onLoad --> (Next)onShow --> (Next)onReady

• 返回上一個頁面：(curr)onUnload --> (pre)onShow

• 離開小程序：(App)onHide

• 再次進入：小程序未銷毀 --> (App)onShow(執行上面的順序），小程序被銷毀，（App)onLaunch重新開始執行.