微信小程序應用和頁面生命周期實例分析

這篇文章主要講解了“微信小程序應用和頁面生命周期實例分析”，文中的講解內(nèi)容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“微信小程序應用和頁面生命周期實例分析”吧！

什么是生命周期

生命周期(Life Cycle）是指一個對象從創(chuàng)建→>運行>銷毀的整個階段，強調(diào)的是一個時間段。如：

• 張三出生，表示這個人生命周期的開始

• 張三離世，表示這個人生命周期的結束

• 中間張三的一生，就是張三的生命周期

我們可以把每個小程序運行的過程，也概括為生命周期:

• 小程序的啟動，表示生命周期的開始

• 小程序的關閉，表示生命周期的結束

• 中間小程序運行的過程，就是小程序的生命周期

生命周期的分類

在小程序中，生命周期分為兩類，分別是:

• 應用生命周期

特指小程序從啟動->運行->銷毀的過程

• 頁面生命周期

特指小程序中，每個頁面的加載->渲染->銷毀的過程

其中，頁面的生命周期范圍較小，應用程序的生命周期范圍較大：

生命周期函數(shù)

生命周期函數(shù):是由小程序框架提供的內(nèi)置函數(shù)，會伴隨著生命周期，自動按次序執(zhí)行。

生命周期函數(shù)的作用:允許程序員在特定的時間點，執(zhí)行某些特定的操作。例如，頁面剛加載的時候，可以在onLoad生命周期函數(shù)中初始化頁面的數(shù)據(jù)。

注意:生命周期強調(diào)的是時間段，生命周期函數(shù)強調(diào)的是時間點。

小程序中的生命周期函數(shù)分為兩類，分別是:

應用的生命周期函數(shù)
特指小程序從啟動->運行-→>銷毀期間依次調(diào)用的那些函數(shù)頁面的生命周期函數(shù)
特指小程序中，每個頁面從加載->渲染-→>銷毀期間依次調(diào)用的那些函數(shù) 小程序的應用生命周期函數(shù)

小程序的應用生命周期函數(shù)需要在app.js 中進行聲明。如：

App({
  /**
   * 當小程序初始化完成時，會觸發(fā) onLaunch（全局只觸發(fā)一次）
   */
  onLaunch: function () {
      console.log("小程序啟動！");
  },
  /**
   * 當小程序啟動，或從后臺進入前臺顯示，會觸發(fā) onShow
   */
  onShow: function (options) {
      console.log('小程序正在前臺運行！');
  },
  /**
   * 當小程序從前臺進入后臺，會觸發(fā) onHide
   */
  onHide: function () { 
      console.log("小程序進入后臺運行！");
  },
  /**
   * 當小程序發(fā)生腳本錯誤，或者 api 調(diào)用失敗時，會觸發(fā) onError 并帶上錯誤信息
   */
  onError: function (msg) {
    
  }
})

• 用戶首次打開小程序，觸發(fā) onLaunch（全局只觸發(fā)一次）。

• 小程序初始化完成后，觸發(fā)onShow方法，監(jiān)聽小程序顯示。

• 小程序從前臺進入后臺，觸發(fā) onHide方法。

• 小程序從后臺進入前臺顯示，觸發(fā) onShow方法。

• 小程序后臺運行一定時間，或系統(tǒng)資源占用過高，會被銷毀。

前臺、后臺定義： 當用戶點擊左上角關閉，或者按了設備 Home 鍵離開微信小程序并沒有直接銷毀，而是進入了后臺；當再次進入微信或再次打開小程序，又會從后臺進入前臺。

小程序的頁面生命周期函數(shù)

小程序的頁面生命周期函數(shù)需要在頁面.js 中進行聲明。如：

Page({
    /**
     * 頁面的初始數(shù)據(jù)
     */
    data: {
    },

    /**
     * 生命周期函數(shù)--監(jiān)聽頁面加載
     */
    onLoad(options) {
        console.log('本地生活頁面加載完畢');
    },
    /**
     * 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
     */
    onReady() {
        console.log("初次渲染完畢！");
    },
    /**
     * 生命周期函數(shù)--監(jiān)聽頁面顯示
     */
    onShow() {
        console.log("頁面顯示完成");
    },
    /**
     * 生命周期函數(shù)--監(jiān)聽頁面隱藏
     */
    onHide() {
        console.log("頁面已被隱藏！");
    },
    /**
     * 生命周期函數(shù)--監(jiān)聽頁面卸載
     */
    onUnload() {
        console.log("GG");
    },

    /**
     * 頁面相關事件處理函數(shù)--監(jiān)聽用戶下拉動作
     */
    onPullDownRefresh() {
        console.log('正在刷新！');
    },

    /**
     * 頁面上拉觸底事件的處理函數(shù)
     */
    onReachBottom() {
        console.log('正在加載更多！');
    },

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

• 小程序注冊完成后，加載頁面，觸發(fā)onLoad方法。

• 頁面載入后觸發(fā)onShow方法，顯示頁面。

• 首次顯示頁面，會觸發(fā)onReady方法，渲染頁面元素和樣式，一個頁面只會調(diào)用一次。

• 當小程序后臺運行或跳轉到其他頁面時，觸發(fā)onHide方法。

• 當小程序有后臺進入到前臺運行或重新進入頁面時，觸發(fā)onShow方法。

• 當使用重定向方法wx.redirectTo(OBJECT)或關閉當前頁返回上一頁wx.navigateBack()，觸發(fā)onUnload。

• 小程序初始化完成后，頁面首次加載觸發(fā)onLoad，只會觸發(fā)一次。

• 當小程序進入到后臺，先執(zhí)行頁面onHide方法再執(zhí)行應用onHide方法。

• 當小程序從后臺進入到前臺，先執(zhí)行應用onShow方法再執(zhí)行頁面onShow方法。

實例演示：

監(jiān)聽事件：

感謝各位的閱讀，以上就是“微信小程序應用和頁面生命周期實例分析”的內(nèi)容了，經(jīng)過本文的學習后，相信大家對微信小程序應用和頁面生命周期實例分析這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！