詳解微信小程式應用和頁面生命週期

2022-08-06 14:00:42

什麼是生命週期

生命週期(Life Cycle）是指一個物件從建立→>執行>銷燬的整個階段，強調的是一個時間段。如：

張三出生，表示這個人生命週期的開始
張三離世，表示這個人生命週期的結束
中間張三的一生，就是張三的生命週期

我們可以把每個小程式執行的過程，也概括為生命週期:

小程式的啟動，表示生命週期的開始
小程式的關閉，表示生命週期的結束
中間小程式執行的過程，就是小程式的生命週期

生命週期的分類

在小程式中，生命週期分為兩類，分別是:

應用生命週期

特指小程式從啟動->執行->銷燬的過程

頁面生命週期

特指小程式中，每個頁面的載入->渲染->銷燬的過程

其中，頁面的生命週期範圍較小，應用程式的生命週期範圍較大：

生命週期函數

生命週期函數:是由小程式框架提供的內建函數，會伴隨著生命週期，自動按次序執行。

生命週期函數的作用:允許程式設計師在特定的時間點，執行某些特定的操作。例如，頁面剛載入的時候，可以在onLoad生命週期函數中初始化頁面的資料。

注意:生命週期強調的是時間段，生命週期函數強調的是時間點。

小程式中的生命週期函數分為兩類，分別是:

應用的生命週期函數
特指小程式從啟動->執行-→>銷燬期間依次呼叫的那些函數頁面的生命週期函數
特指小程式中，每個頁面從載入->渲染-→>銷燬期間依次呼叫的那些函數 小程式的應用生命週期函數

小程式的應用生命週期函數需要在app.js 中進行宣告。如：

App({
  /**
   * 當小程式初始化完成時，會觸發 onLaunch（全域性只觸發一次）
   */
  onLaunch: function () {
      console.log("小程式啟動！");
  },
  /**
   * 當小程式啟動，或從後臺進入前臺顯示，會觸發 onShow
   */
  onShow: function (options) {
      console.log('小程式正在前臺執行！');
  },
  /**
   * 當小程式從前臺進入後臺，會觸發 onHide
   */
  onHide: function () { 
      console.log("小程式進入後臺執行！");
  },
  /**
   * 當小程式發生指令碼錯誤，或者 api 呼叫失敗時，會觸發 onError 並帶上錯誤資訊
   */
  onError: function (msg) {
    
  }
})

使用者首次開啟小程式，觸發 onLaunch（全域性只觸發一次）。
小程式初始化完成後，觸發onShow方法，監聽小程式顯示。
小程式從前臺進入後臺，觸發 onHide方法。
小程式從後臺進入前臺顯示，觸發 onShow方法。
小程式後臺執行一定時間，或系統資源佔用過高，會被銷燬。

屬性	型別	描述	觸發時機
onLaunch	Function	監聽小程式初始化	當小程式初始化完成時，會觸發 onLaunch（全域性只觸發一次）。
onShow	Function	監聽小程式顯示	當小程式啟動，或從後臺進入前臺顯示，會觸發 onShow
onHide	Function	監聽小程式隱藏	當小程式從前臺進入後臺，會觸發 onHide
onError	Function	錯誤監聽函數	當小程式發生指令碼錯誤，或者 api 呼叫失敗時，會觸發 onError 並帶上錯誤資訊
其他	Any		開發者可以新增任意的函數或資料到 Object 引數中，用 this 可以存取，上面的getPics就是函數， globalName是資料，這裡面的函數和資料都是全域性的。呼叫方式：在Pager中通過getApp()方法得到App物件並獲得全域性的資料和呼叫全域性的函數

前臺、後臺定義：當用戶點選左上角關閉，或者按了裝置 Home 鍵離開微信小程式並沒有直接銷燬，而是進入了後臺；當再次進入微信或再次開啟小程式，又會從後臺進入前臺。

小程式的頁面生命週期函數

小程式的頁面生命週期函數需要在頁面.js 中進行宣告。如：

Page({
    /**
     * 頁面的初始資料
     */
    data: {
    },

    /**
     * 生命週期函數--監聽頁面載入
     */
    onLoad(options) {
        console.log('本地生活頁面載入完畢');
    },
    /**
     * 生命週期函數--監聽頁面初次渲染完成
     */
    onReady() {
        console.log("初次渲染完畢！");
    },
    /**
     * 生命週期函數--監聽頁面顯示
     */
    onShow() {
        console.log("頁面顯示完成");
    },
    /**
     * 生命週期函數--監聽頁面隱藏
     */
    onHide() {
        console.log("頁面已被隱藏！");
    },
    /**
     * 生命週期函數--監聽頁面解除安裝
     */
    onUnload() {
        console.log("GG");
    },

    /**
     * 頁面相關事件處理常式--監聽使用者下拉動作
     */
    onPullDownRefresh() {
        console.log('正在重新整理！');
    },

    /**
     * 頁面上拉觸底事件的處理常式
     */
    onReachBottom() {
        console.log('正在載入更多！');
    },

    /**
     * 使用者點選右上角分享
     */
    onShareAppMessage() {
        console.log('使用者正在分享！');
    }
})

小程式註冊完成後，載入頁面，觸發onLoad方法。
頁面載入後觸發onShow方法，顯示頁面。
首次顯示頁面，會觸發onReady方法，渲染頁面元素和樣式，一個頁面只會呼叫一次。
當小程式後臺執行或跳轉到其他頁面時，觸發onHide方法。
當小程式有後臺進入到前臺執行或重新進入頁面時，觸發onShow方法。
當使用重定向方法wx.redirectTo(OBJECT)或關閉當前頁返回上一頁wx.navigateBack()，觸發onUnload。

函數	說明	作用
onLoad	生命週期回撥—監聽頁面載入	傳送請求獲取資料
onShow	生命週期回撥—監聽頁面顯示	請求資料
onReady	生命週期回撥—監聽頁面初次渲染完成	獲取頁面元素(少用)
onHide	生命週期回撥—監聽頁面隱藏	終止任務，如定時器或者播放音樂
onUnload	生命週期回撥—監聽頁面解除安裝	終止任務

小程式初始化完成後，頁面首次載入觸發onLoad，只會觸發一次。
當小程式進入到後臺，先執行頁面onHide方法再執行應用onHide方法。
當小程式從後臺進入到前臺，先執行應用onShow方法再執行頁面onShow方法。

範例演示：

監聽事件：

到此這篇關於微信小程式應用和頁面生命週期的文章就介紹到這了,更多相關小程式應用和頁面生命週期內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！

詳解微信小程式應用和頁面生命週期

目錄

什麼是生命週期

生命週期的分類

小程式的頁面生命週期函數

熱門文章