這篇文章帶大家一起看看微信小程式中的生命週期,都有哪些生命週期函數,來聊一聊其從觸發時機及其所做的事情,希望對大家有所幫助!
#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. 元件的全部生命週期元件有哪些生命週期?分別是什麼時候?
#參數 | 描述 | |
---|---|---|
| #created
| 無
|
| attached
| 無
|
ready | 無 | |
moved | 無 | |
| detached | 無 |
error | Object Error |
5. 组件主要的生命周期函数
data在哪个生命周期中初始化完毕?
组件的生命周期,指的是组件自身的一些函数,这些函数在特殊的时间点或遇到一些特殊的框架事件时被自动触发。
最重要的生命周期是 created
, attached
, detached
,包含一个组件实例生命流程的最主要时间点。
组件实例刚刚被创建好时, created
生命周期被触发
setData
在组件完全初始化完毕、进入页面节点树后, 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中文網其他相關文章!