本篇文章帶大家一起看看微信小程序中的生命周期，都有哪些生命周期函數(shù)，來聊一聊其從觸發(fā)時(shí)機(jī)及其所做的事情，希望對(duì)大家有所幫助！

一、生命周期

1. 什么是生命周期？

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

2. 小程序的生命周期

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

3. 小程序生命周期分類

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

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

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

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

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

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

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

  • 允許程序員在特定的生命周期時(shí)間點(diǎn)上，執(zhí)行某些特定的操作
  • 例如，頁面剛加載的時(shí)候，在生命周期函數(shù)中自動(dòng)發(fā)起數(shù)據(jù)請(qǐng)求，獲取當(dāng)前頁面的數(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ù)是用來注冊(cè)并執(zhí)行小程序的

• App(Object) 函數(shù)接收一個(gè) Object 參數(shù)，可以通過這個(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. 頁面的生命周期

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

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

• page.js

代碼如下（示例）：

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

Page({

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

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

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

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

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

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

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

  /**
   * 頁面上拉觸底事件的處理函數(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)入頁面節(jié)點(diǎn)樹后， attached 生命周期被觸發(fā)

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

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

  • 退出一個(gè)頁面時(shí)，會(huì)觸發(fā)頁面內(nèi)每個(gè)自定義組件的detached 生命周期被觸發(fā)
  • 如果組件還在頁面節(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)入頁面節(jié)點(diǎn)樹')
  },
  detached () {
    console.log('在組件實(shí)例被從頁面節(jié)點(diǎn)樹移除')
  }
},

attached () {
  console.log('~~~~~在組件實(shí)例進(jìn)入頁面節(jié)點(diǎn)樹')
},
detached () {
  console.log('~~~~~在組件實(shí)例被從頁面節(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'
}

更多編程相關(guān)知識(shí)，請(qǐng)?jiān)L問：編程入門??！

以上是一起聊聊微信小程序中的生命周期（函數(shù)）的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！