詳解微信小程序應用和頁面生命周期

Posted on by

什麼是生命周期

生命周期(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方法。

實例演示：

監聽事件：

到此這篇關於微信小程序應用和頁面生命周期的文章就介紹到這瞭,更多相關小程序應用和頁面生命周期內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：