天天看點

微信小程式的生命周期詳解

1,應用生命周期

App:

App()函數用來注冊一個小程式。接受一個object參數,其指定小程式的生命周期函數等。

微信小程式的生命周期詳解

關于小程式的退出:當使用者點選小程式左上角關閉,或者按裝置Home鍵離開微信,小程式并沒有直接銷毀,而是觸發onHide方法進入了背景,短時間内當再次進入微信或者再次打開小程式,小程式會從背景狀态進入前台,此為“熱啟動”。注意當小程式進入背景狀态一定時間後,或者系統資源占用過高,微信會真正銷毀小程式。使用者第一次進入小程式或者在小程式銷毀後再次進入小程式是為“冷啟動”。

小程式的冷啟動:小程式在冷啟動時會依次觸發onLaunch—>onShow

小程式的熱啟動:小程式在熱啟動時會觸發onShow

小程式關閉時:即小程式從前台進入背景時觸發onHide

這是小程式的生命周期,觸發的是App()中的方法,實際開發中,我們往往會有多個頁面,每個頁面也有各自的生命周期,是以在關閉小程式時會先執行頁面的生命周期函數,然後執行小程式的生命周期函數,同理在小程式啟動或者有背景狀态進入前台時會執行小程式的生命周期函數,然後執行頁面的生命周期函數,進而打開小程式打開頁面。

下面我們就先來看一下小程式page的生命周期是怎樣的吧

2,頁面生命周期

Page:

Page()

 函數用來注冊一個頁面。接受一個 object 參數,其指定頁面的初始資料、生命周期函數、事件處理函數等。

微信小程式的生命周期詳解

生命周期函數

  • onLoad

    : 頁面加載
    • 一個頁面隻會調用一次,可以在 onLoad 中擷取打開目前頁面所調用的 query 參數。
  • onShow

    : 頁面顯示
    • 每次打開頁面都會調用一次。
  • onReady

    : 頁面初次渲染完成
    • 一個頁面隻會調用一次,代表頁面已經準備妥當,可以和視圖層進行互動。
    • 對界面的設定如

      wx.setNavigationBarTitle

      請在

      onReady

      之後設定。詳見生命周期
  • onHide

    : 頁面隐藏
    • navigateTo

      或底部

      tab

      切換時調用。
  • onUnload

    : 頁面解除安裝
    • redirectTo

      navigateBack

      的時候調用。

3、應用生命周期和頁面生命周期

微信小程式的生命周期詳解

(1)小程式初始化完成後,頁面首次加載觸發onLoad,隻會觸發一次。

(2)當小程式進入到背景,先執行頁面onHide方法再執行應用onHide方法。

(3)當小程式從背景進入到前台,先執行應用onShow方法再執行頁面onShow方法。

4、路由變化對頁面生命周期的影響

在小程式中所有頁面的路由全部由架構進行管理,架構以棧的形式維護目前的所有頁面,當發生路由切換的時候,頁面棧的表現如下:

微信小程式的生命周期詳解

對于路由的觸發方式以及頁面生命周期函數如下:

微信小程式的生命周期詳解

Tab 切換對應的生命周期(以 A、B 頁面為 Tabbar 頁面,C 是從 A 頁面打開的頁面,D 頁面是從 C 頁面打開的頁面為例):

微信小程式的生命周期詳解