本篇內(nèi)容主要講解“怎么理解微信小程序中的生命周期”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“怎么理解微信小程序中的生命周期”吧!
站在用戶的角度思考問題，與客戶深入溝通，找到天橋網(wǎng)站設(shè)計與天橋網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗，讓設(shè)計與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個性化、用戶體驗好的作品，建站類型包括：成都網(wǎng)站設(shè)計、網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣、申請域名、網(wǎng)站空間、企業(yè)郵箱。業(yè)務(wù)覆蓋天橋地區(qū)。
1. 什么是生命周期？
生命周期 (Life Cycle) 是指一個對象從 創(chuàng)建 -> 運行 -> 銷毀 的整個階段，強調(diào)的是一個時間段
2. 小程序的生命周期
小程序的 啟動，表示 生命周期的開始
小程序的 關(guān)閉，表示 生命周期的結(jié)束
中間小程序運行的過程，就是小程序的生命周期
3. 小程序生命周期分類
應(yīng)用生命周期 特指小程序從啟動 --> 運行 --> 銷毀的過程
頁面生命周期 特指小程序中，每個頁面的加載 --> 渲染 --> 銷毀的過程
注意：頁面的生命周期范圍較小，應(yīng)用程序的生命周期范圍較大
1. 什么是生命周期函數(shù)？
小程序框架提供的內(nèi)置函數(shù)，會伴隨著生命周期，自動按次序執(zhí)行
生命周期函數(shù)的作用：
允許程序員在特定的生命周期時間點上，執(zhí)行某些特定的操作
例如，頁面剛加載的時候，在生命周期函數(shù)中自動發(fā)起數(shù)據(jù)請求，獲取當前頁面的數(shù)據(jù)
注意：生命周期強調(diào)的是時間段，生命周期函數(shù)強調(diào)的是時間點。
2. 應(yīng)用的生命周期函數(shù)
app.js 是小程序執(zhí)行的入口文件，在 app.js 中必須調(diào)用 App() 函數(shù)，且只能調(diào)用一次。其中，App() 函數(shù)是用來注冊并執(zhí)行小程序的
App(Object) 函數(shù)接收一個 Object 參數(shù)，可以通過這個 Object 參數(shù)，指定小程序的生命周期函數(shù)
app.js 中的代碼
代碼如下（示例）：
重慶分公司
重慶分公司
App({
/**
* 當小程序初始化完成時，會觸發(fā) onLaunch（全局只觸發(fā)一次）
*/
onLaunch: function () { },
/**
* 當小程序啟動，或從后臺進入前臺顯示，會觸發(fā) onShow
*/
onShow: function (options) { },
/**
* 當小程序從前臺進入后臺，會觸發(fā) onHide
*/
onHide: function () { },
/**
* 當小程序發(fā)生腳本錯誤，或者 api 調(diào)用失敗時，會觸發(fā) onError 并帶上錯誤信息
*/
onError: function (msg) { }
})3. 頁面的生命周期
每個小程序頁面，必須擁有自己的 .js 文件，且必須調(diào)用 Page() 函數(shù)，否則報錯。其中 Page() 函數(shù)用來注冊小程序頁面
Page(Object) 函數(shù)接收一個 Object 參數(shù)，可以通過這個 Object 參數(shù)，指定頁面的生命周期函數(shù)
page.js
代碼如下（示例）：
//index.js
//獲取應(yīng)用實例
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)聽用戶下拉動作
*/
onPullDownRefresh: function () { },
/**
* 頁面上拉觸底事件的處理函數(shù)
*/
onReachBottom: function () { },
/**
* 用戶點擊右上角分享
*/
onShareAppMessage: function () { }
})4. 組件的全部生命周期
組件有哪些生命周期？分別是什么時候？
| 生命周期 | 參數(shù) | 描述 |
|---|---|---|
created | 無 | 在組件實例剛剛被創(chuàng)建時執(zhí)行 |
attached | 無 | 在組件實例進入頁面節(jié)點樹時執(zhí)行 |
| ready | 無 | 在組件在視圖層布局完成后執(zhí)行 |
| moved | 無 | 在組件實例被移動到節(jié)點樹另一個位置時執(zhí)行 |
detached | 無 | 在組件實例被從頁面節(jié)點樹移除時執(zhí)行 |
| error | Object Error | 每當組件方法拋出錯誤時執(zhí)行 |
5. 組件主要的生命周期函數(shù)
data在哪個生命周期中初始化完畢？
組件的生命周期，指的是組件自身的一些函數(shù)，這些函數(shù)在特殊的時間點或遇到一些特殊的框架事件時被自動觸發(fā)。
最重要的生命周期是 created, attached, detached ，包含一個組件實例生命流程的最主要時間點。
組件實例剛剛被創(chuàng)建好時， created 生命周期被觸發(fā)
此時還不能調(diào)用 setData
通常情況下，這個生命周期只應(yīng)該用于給組件 this 添加一些自定義屬性字段
在組件完全初始化完畢、進入頁面節(jié)點樹后， attached 生命周期被觸發(fā)
this.data 已被初始化完畢
這個生命周期很有用，絕大多數(shù)初始化工作可以在這個時機進行
在組件離開頁面節(jié)點樹后， detached 生命周期被觸發(fā)
退出一個頁面時，會觸發(fā)頁面內(nèi)每個自定義組件的detached 生命周期被觸發(fā)
如果組件還在頁面節(jié)點樹中，則 detached 會被觸發(fā)。
此時適合做一些清理性質(zhì)的工作
6. lifetimes 節(jié)點
同時以兩種方式聲明生命周期函數(shù)，會執(zhí)行哪個？
生命周期方法可以直接定義在 Component 構(gòu)造器的第一級參數(shù)中，組件的的生命周期也可以在 lifetimes 字段內(nèi)進行聲明（這是推薦的方式，其優(yōu)先級最高）
lifetimes: {
attached () {
console.log('在組件實例進入頁面節(jié)點樹')
},
detached () {
console.log('在組件實例被從頁面節(jié)點樹移除')
}
},
attached () {
console.log('~~~~~在組件實例進入頁面節(jié)點樹')
},
detached () {
console.log('~~~~~在組件實例被從頁面節(jié)點樹移除')
},
/**
* 組件的初始數(shù)據(jù)
*/
data: {
// rgb 的顏色值對象
_rgb: {
r: 0,
g: 0,
b: 0
},
// 根據(jù) rgb 對象的三個屬性，動態(tài)計算 fullColor 的值
fullColor: '0, 0, 0'
}到此，相信大家對“怎么理解微信小程序中的生命周期”有了更深的了解，不妨來實際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進入相關(guān)頻道進行查詢，關(guān)注我們，繼續(xù)學習！
