微信小程式生命週期

喆星高照發表於2021-10-20
微信小程式

 

 

 

一、是什麼

跟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重新開始執行.

相關文章