怎么理解微信小程序中的生命周期

本篇內(nèi)容主要講解“怎么理解微信小程序中的生命周期”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“怎么理解微信小程序中的生命周期”吧!

一、生命周期

1. 什么是生命周期？

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

2. 小程序的生命周期

• 小程序的 啟動(dòng)，表示 生命周期的開(kāi)始

• 小程序的 關(guān)閉，表示 生命周期的結(jié)束

• 中間小程序運(yùn)行的過(guò)程，就是小程序的生命周期

3. 小程序生命周期分類

• 應(yīng)用生命周期 特指小程序從啟動(dòng) --> 運(yùn)行 --> 銷毀的過(guò)程

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

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

二、生命周期函數(shù)

1. 什么是生命周期函數(shù)？

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

• 生命周期函數(shù)的作用：

• 允許程序員在特定的生命周期時(shí)間點(diǎn)上，執(zhí)行某些特定的操作

• 例如，頁(yè)面剛加載的時(shí)候，在生命周期函數(shù)中自動(dòng)發(fā)起數(shù)據(jù)請(qǐng)求，獲取當(dāng)前頁(yè)面的數(shù)據(jù)

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

2. 應(yīng)用的生命周期函數(shù)

• app.js 是小程序執(zhí)行的入口文件，在 app.js 中必須調(diào)用 App() 函數(shù)，且只能調(diào)用一次。其中，App() 函數(shù)是用來(lái)注冊(cè)并執(zhí)行小程序的

• App(Object) 函數(shù)接收一個(gè) Object 參數(shù)，可以通過(guò)這個(gè) Object 參數(shù)，指定小程序的生命周期函數(shù)

• app.js 中的代碼

代碼如下（示例）：

App({

  /**
   * 當(dāng)小程序初始化完成時(shí)，會(huì)觸發(fā) onLaunch（全局只觸發(fā)一次）
   */
  onLaunch: function () { },

  /**
   * 當(dāng)小程序啟動(dòng)，或從后臺(tái)進(jìn)入前臺(tái)顯示，會(huì)觸發(fā) onShow
   */
  onShow: function (options) { },

  /**
   * 當(dāng)小程序從前臺(tái)進(jìn)入后臺(tái)，會(huì)觸發(fā) onHide
   */
  onHide: function () { },

  /**
   * 當(dāng)小程序發(fā)生腳本錯(cuò)誤，或者 api 調(diào)用失敗時(shí)，會(huì)觸發(fā) onError 并帶上錯(cuò)誤信息
   */
  onError: function (msg) { }
})

3.  頁(yè)面的生命周期

• 每個(gè)小程序頁(yè)面，必須擁有自己的 .js 文件，且必須調(diào)用 Page() 函數(shù)，否則報(bào)錯(cuò)。其中 Page() 函數(shù)用來(lái)注冊(cè)小程序頁(yè)面

• Page(Object) 函數(shù)接收一個(gè) Object 參數(shù)，可以通過(guò)這個(gè) Object 參數(shù)，指定頁(yè)面的生命周期函數(shù)

• page.js

代碼如下（示例）：

//index.js
//獲取應(yīng)用實(shí)例
const app = getApp()

Page({

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

  /**
   * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
   */
  onLoad: function (options) { },

  /**
   * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面初次渲染完成
   */
  onReady: function () { },

  /**
   * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面顯示
   */
  onShow: function () { },

  /**
   * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面隱藏
   */
  onHide: function () { },

  /**
   * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面卸載
   */
  onUnload: function () { },

  /**
   * 頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽(tīng)用戶下拉動(dòng)作
   */
  onPullDownRefresh: function () { },

  /**
   * 頁(yè)面上拉觸底事件的處理函數(shù)
   */
  onReachBottom: function () { },

  /**
   * 用戶點(diǎn)擊右上角分享
   */
  onShareAppMessage: function () { }
})

4. 組件的全部生命周期

組件有哪些生命周期？分別是什么時(shí)候？

5. 組件主要的生命周期函數(shù)

data在哪個(gè)生命周期中初始化完畢？

組件的生命周期，指的是組件自身的一些函數(shù)，這些函數(shù)在特殊的時(shí)間點(diǎn)或遇到一些特殊的框架事件時(shí)被自動(dòng)觸發(fā)。

最重要的生命周期是 created, attached, detached ，包含一個(gè)組件實(shí)例生命流程的最主要時(shí)間點(diǎn)。

• 組件實(shí)例剛剛被創(chuàng)建好時(shí)， created 生命周期被觸發(fā)

• 此時(shí)還不能調(diào)用 setData

• 通常情況下，這個(gè)生命周期只應(yīng)該用于給組件 this 添加一些自定義屬性字段

• 在組件完全初始化完畢、進(jìn)入頁(yè)面節(jié)點(diǎn)樹后， attached 生命周期被觸發(fā)

• this.data 已被初始化完畢

• 這個(gè)生命周期很有用，絕大多數(shù)初始化工作可以在這個(gè)時(shí)機(jī)進(jìn)行

• 在組件離開(kāi)頁(yè)面節(jié)點(diǎn)樹后， detached 生命周期被觸發(fā)

• 退出一個(gè)頁(yè)面時(shí)，會(huì)觸發(fā)頁(yè)面內(nèi)每個(gè)自定義組件的detached 生命周期被觸發(fā)

• 如果組件還在頁(yè)面節(jié)點(diǎn)樹中，則 detached 會(huì)被觸發(fā)。

• 此時(shí)適合做一些清理性質(zhì)的工作

6.  lifetimes 節(jié)點(diǎn)

同時(shí)以兩種方式聲明生命周期函數(shù)，會(huì)執(zhí)行哪個(gè)？

生命周期方法可以直接定義在 Component 構(gòu)造器的第一級(jí)參數(shù)中，組件的的生命周期也可以在 lifetimes 字段內(nèi)進(jìn)行聲明（這是推薦的方式，其優(yōu)先級(jí)最高）

lifetimes: {
  attached () {
    console.log('在組件實(shí)例進(jìn)入頁(yè)面節(jié)點(diǎn)樹')
  },
  detached () {
    console.log('在組件實(shí)例被從頁(yè)面節(jié)點(diǎn)樹移除')
  }
},

attached () {
  console.log('~~~~~在組件實(shí)例進(jìn)入頁(yè)面節(jié)點(diǎn)樹')
},
detached () {
  console.log('~~~~~在組件實(shí)例被從頁(yè)面節(jié)點(diǎn)樹移除')
},

/**
 * 組件的初始數(shù)據(jù)
 */
data: {
  // rgb 的顏色值對(duì)象
  _rgb: {
    r: 0,
    g: 0,
    b: 0
  },
  // 根據(jù) rgb 對(duì)象的三個(gè)屬性，動(dòng)態(tài)計(jì)算 fullColor 的值
  fullColor: '0, 0, 0'
}

到此，相信大家對(duì)“怎么理解微信小程序中的生命周期”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！