一起聊聊微信小程式中的生命週期（函數）

這篇文章帶大家一起看看微信小程式中的生命週期，都有哪些生命週期函數，來聊一聊其從觸發時機及其所做的事情，希望對大家有所幫助！

一、生命週期

#1. 什麼是生命週期？

生命週期(Life Cycle) 是指一個物件從創建-> 運行-> 銷毀的整個階段，強調的是一個時間段

2. 小程式的生命週期

• 小程式的啟動，表示生命週期的開始
• 小程式的關閉，表示生命週期的結束
##中間小程式運作的過程，就是小程式的生命週期

3. 小程式生命週期分類

• 應用生命週期 特指小程式從啟動 --> 執行 --> 銷毀的過程

• 頁面生命週期 特指小程式中，每個頁面的載入--> 渲染--> 銷毀的過程

• #注意：頁面的生命週期範圍較小，應用程式的生命週期範圍較大

#二、生命週期函數

#1. 什麼是生命週期函數？

• 小程式框架提供的內建函數，會伴隨著生命週期，自動依序執行

• 生命週期函數的作用：
  允許程式設計師在特定的生命週期時間點上，執行某些特定的操作
  • 例如，頁面剛載入的時候，在生命週期函數中自動發起資料請求，取得目前頁面的資料

• 注意：生命週期強調的是時間段，生命週期函數強調的是時間點。

2. 應用程式的生命週期函數

• app.js 是小程式執行的入口文件，在app.js 中必須呼叫App() 函數，且只能呼叫一次。其中，App() 函數是用來註冊並執行小程式的

• App(Object) 函數接收一個Object 參數，可以透過這個Object 參數，指定小程式的生命週期函數

• app.js 中的程式碼

程式碼如下（範例）：

App({

  /**
   * 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
   */
  onLaunch: function () { },

  /**
   * 当小程序启动，或从后台进入前台显示，会触发 onShow
   */
  onShow: function (options) { },

  /**
   * 当小程序从前台进入后台，会触发 onHide
   */
  onHide: function () { },

  /**
   * 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
   */
  onError: function (msg) { }
})

#3.  頁面的生命週期

• 每個小程式頁面，必須擁有自己的

  .js 文件，且必須呼叫Page() 函數，否則報錯。其中Page() 函數用來註冊小程式頁面

• #Page(Object) 函數接收一個Object 參數，可以透過這個Object 參數，指定頁面的生命週期函數

• #page.js

##程式碼如下（範例）：

//index.js
//获取应用实例
const app = getApp()

Page({

  /**
   * 页面的初始数据
   */
  data: { },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) { },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () { },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () { },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () { },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () { },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () { },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () { },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () { }
})

4. 元件的全部生命週期元件有哪些生命週期？分別是什麼時候？

生命週期在元件實例剛被建立時執行#在元件實例進入頁面節點樹時執行ready無在元件在視圖層佈局完成後執行moved無在元件實例被移到節點樹另一個位置時執行 #在元件實例被從頁面節點樹移除時執行每當元件方法拋出錯誤時執行

#參數	描述
	#created	無
	attached	無
	detached	無
	error	Object Error

#########

5. 组件主要的生命周期函数

data在哪个生命周期中初始化完毕？

组件的生命周期，指的是组件自身的一些函数，这些函数在特殊的时间点或遇到一些特殊的框架事件时被自动触发。

最重要的生命周期是 created, attached, detached ，包含一个组件实例生命流程的最主要时间点。

• 组件实例刚刚被创建好时， created 生命周期被触发

  • 此时还不能调用 setData
  • 通常情况下，这个生命周期只应该用于给组件 this 添加一些自定义属性字段

• 在组件完全初始化完毕、进入页面节点树后， attached 生命周期被触发

  • this.data 已被初始化完毕
  • 这个生命周期很有用，绝大多数初始化工作可以在这个时机进行

• 在组件离开页面节点树后， detached 生命周期被触发

  • 退出一个页面时，会触发页面内每个自定义组件的detached 生命周期被触发
  • 如果组件还在页面节点树中，则 detached 会被触发。
  • 此时适合做一些清理性质的工作

6. lifetimes 节点

同时以两种方式声明生命周期函数，会执行哪个？

生命周期方法可以直接定义在 Component 构造器的第一级参数中，组件的的生命周期也可以在 lifetimes 字段内进行声明（这是推荐的方式，其优先级最高）

lifetimes: {
  attached () {
    console.log('在组件实例进入页面节点树')
  },
  detached () {
    console.log('在组件实例被从页面节点树移除')
  }
},

attached () {
  console.log('~~~~~在组件实例进入页面节点树')
},
detached () {
  console.log('~~~~~在组件实例被从页面节点树移除')
},

/**
 * 组件的初始数据
 */
data: {
  // rgb 的颜色值对象
  _rgb: {
    r: 0,
    g: 0,
    b: 0
  },
  // 根据 rgb 对象的三个属性，动态计算 fullColor 的值
  fullColor: '0, 0, 0'
}

更多编程相关知识，请访问：编程入门！！

以上是一起聊聊微信小程式中的生命週期（函數）的詳細內容。更多資訊請關注PHP中文網其他相關文章！