什么是生命周期

生命周期(Life Cycle）是指一個(gè)對(duì)象從創(chuàng)建→>運(yùn)行>銷毀的整個(gè)階段，強(qiáng)調(diào)的是一個(gè)時(shí)間段。如：

• 張三出生，表示這個(gè)人生命周期的開(kāi)始
• 張三離世，表示這個(gè)人生命周期的結(jié)束
• 中間張三的一生，就是張三的生命周期

我們可以把每個(gè)小程序運(yùn)行的過(guò)程，也概括為生命周期:

• 小程序的啟動(dòng)，表示生命周期的開(kāi)始
• 小程序的關(guān)閉，表示生命周期的結(jié)束
• 中間小程序運(yùn)行的過(guò)程，就是小程序的生命周期

生命周期的分類

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

• 應(yīng)用生命周期

特指小程序從啟動(dòng)->運(yùn)行->銷毀的過(guò)程

• 頁(yè)面生命周期

特指小程序中，每個(gè)頁(yè)面的加載->渲染->銷毀的過(guò)程

其中，頁(yè)面的生命周期范圍較小，應(yīng)用程序的生命周期范圍較大：

生命周期函數(shù)

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

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

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

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

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

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

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

• 用戶首次打開(kāi)小程序，觸發(fā) onLaunch（全局只觸發(fā)一次）。
• 小程序初始化完成后，觸發(fā)onShow方法，監(jiān)聽(tīng)小程序顯示。
• 小程序從前臺(tái)進(jìn)入后臺(tái)，觸發(fā) onHide方法。
• 小程序從后臺(tái)進(jìn)入前臺(tái)顯示，觸發(fā) onShow方法。
• 小程序后臺(tái)運(yùn)行一定時(shí)間，或系統(tǒng)資源占用過(guò)高，會(huì)被銷毀。

前臺(tái)、后臺(tái)定義： 當(dāng)用戶點(diǎn)擊左上角關(guān)閉，或者按了設(shè)備 Home 鍵離開(kāi)微信小程序并沒(méi)有直接銷毀，而是進(jìn)入了后臺(tái)；當(dāng)再次進(jìn)入微信或再次打開(kāi)小程序，又會(huì)從后臺(tái)進(jìn)入前臺(tái)。

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

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

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

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

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

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

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

• 小程序注冊(cè)完成后，加載頁(yè)面，觸發(fā)onLoad方法。
• 頁(yè)面載入后觸發(fā)onShow方法，顯示頁(yè)面。
• 首次顯示頁(yè)面，會(huì)觸發(fā)onReady方法，渲染頁(yè)面元素和樣式，一個(gè)頁(yè)面只會(huì)調(diào)用一次。
• 當(dāng)小程序后臺(tái)運(yùn)行或跳轉(zhuǎn)到其他頁(yè)面時(shí)，觸發(fā)onHide方法。
• 當(dāng)小程序有后臺(tái)進(jìn)入到前臺(tái)運(yùn)行或重新進(jìn)入頁(yè)面時(shí)，觸發(fā)onShow方法。
• 當(dāng)使用重定向方法wx.redirectTo(OBJECT)或關(guān)閉當(dāng)前頁(yè)返回上一頁(yè)wx.navigateBack()，觸發(fā)onUnload。

• 小程序初始化完成后，頁(yè)面首次加載觸發(fā)onLoad，只會(huì)觸發(fā)一次。
• 當(dāng)小程序進(jìn)入到后臺(tái)，先執(zhí)行頁(yè)面onHide方法再執(zhí)行應(yīng)用onHide方法。
• 當(dāng)小程序從后臺(tái)進(jìn)入到前臺(tái)，先執(zhí)行應(yīng)用onShow方法再執(zhí)行頁(yè)面onShow方法。

實(shí)例演示：

監(jiān)聽(tīng)事件：

到此這篇關(guān)于微信小程序應(yīng)用和頁(yè)面生命周期的文章就介紹到這了,更多相關(guān)小程序應(yīng)用和頁(yè)面生命周期內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論