微信小程序之入門(mén)篇（一）
微信小程序之注冊(cè)篇（二）
微信小程序之開(kāi)發(fā)初體驗(yàn)（三）——開(kāi)發(fā)工具使用和目錄結(jié)構(gòu)
微信小程序之生命周期（四）
微信小程序之?dāng)?shù)據(jù)綁定（五）
微信小程序之觸控事件（六）
微信小程序之基礎(chǔ)組件篇——視圖容器（七）
微信小程序之基礎(chǔ)組件篇——基礎(chǔ)內(nèi)容（八）
微信小程序之基礎(chǔ)組件篇——表單組件（九）
微信小程序之基礎(chǔ)組件篇——導(dǎo)航組件（十）
微信小程序之基礎(chǔ)組件篇——媒體組件（十一）
微信小程序之API篇——豆瓣圖書(shū)搜索（十二）
微信小程序之拓展篇——weui-wxss（十三）
本篇文章介紹小程序的生命周期，由于小程序分為應(yīng)用和頁(yè)面兩個(gè)部分，所以小程序的生命周期就涉及到三個(gè)部分契耿，分別是：
- 應(yīng)用的生命周期
- 頁(yè)面的生命周期
- 應(yīng)用的生命周期對(duì)頁(yè)面生命周期的影響
一邻悬、應(yīng)用的生命周期
App() 函數(shù)用來(lái)注冊(cè)一個(gè)小程序姐赡。接受一個(gè) object 參數(shù)盛霎，其指定小程序的生命周期函數(shù)等绞绒。
object參數(shù)說(shuō)明：
| 屬性 | 類型 | 描述 | 觸發(fā)時(shí)機(jī) |
|---|---|---|---|
| onLaunch | Function | 生命周期函數(shù)--監(jiān)聽(tīng)小程序初始化 | 當(dāng)小程序初始化完成時(shí)，會(huì)觸發(fā) onLaunch（全局只觸發(fā)一次） |
| onShow | Function | 生命周期函數(shù)--監(jiān)聽(tīng)小程序顯示 | 當(dāng)小程序啟動(dòng)十籍，或從后臺(tái)進(jìn)入前臺(tái)顯示，會(huì)觸發(fā) onShow |
| onHide | Function | 生命周期函數(shù)--監(jiān)聽(tīng)小程序隱藏 | 當(dāng)小程序從前臺(tái)進(jìn)入后臺(tái)唇礁，會(huì)觸發(fā) onHide |
前臺(tái)勾栗、后臺(tái)定義： 當(dāng)用戶點(diǎn)擊左上角關(guān)閉，或者按了設(shè)備 Home 鍵離開(kāi)微信盏筐，小程序并沒(méi)有直接銷毀围俘，而是進(jìn)入了后臺(tái)；當(dāng)再次進(jìn)入微信或再次打開(kāi)小程序琢融，又會(huì)從后臺(tái)進(jìn)入前臺(tái)界牡。
- 用戶首次打開(kāi)小程序，觸發(fā) onLaunch（全局只觸發(fā)一次）漾抬。
- 小程序初始化完成后宿亡，觸發(fā)onShow方法，監(jiān)聽(tīng)小程序顯示纳令。
- 小程序從前臺(tái)進(jìn)入后臺(tái)她混，觸發(fā) onHide方法烈钞。
- 小程序從后臺(tái)進(jìn)入前臺(tái)顯示，觸發(fā) onShow方法坤按。
- 小程序后臺(tái)運(yùn)行一定時(shí)間，或系統(tǒng)資源占用過(guò)高臭脓，會(huì)被銷毀酗钞。
示例代碼：
App({
onLaunch: function() {
// Do something initial when launch.
},
onShow: function() {
// Do something when show.
},
onHide: function() {
// Do something when hide.
},
onError: function(msg) {
console.log(msg)
},
globalData: 'I am global data'
})
小程序提供了全局的 getApp()函數(shù)，可以獲取到小程序?qū)嵗?/p>
// other.js
var appInstance = getApp()
console.log(appInstance.globalData) // I am global data
注意：
App() 必須在 app.js 中注冊(cè)来累，且不能注冊(cè)多個(gè)砚作。
不要在定義于 App() 內(nèi)的函數(shù)中調(diào)用 getApp() ，使用 this 就可以拿到 app 實(shí)例嘹锁。
不要在 onLaunch 的時(shí)候調(diào)用 getCurrentPage()葫录，此時(shí) page 還沒(méi)有生成。
通過(guò) getApp() 獲取實(shí)例之后领猾，不要私自調(diào)用生命周期函數(shù)米同。
頁(yè)面的生命周期
Page()函數(shù)用來(lái)注冊(cè)一個(gè)頁(yè)面。接受一個(gè) object 參數(shù)摔竿，其指定頁(yè)面的初始數(shù)據(jù)面粮、生命周期函數(shù)、事件處理函數(shù)等继低。
object 參數(shù)說(shuō)明：
| 屬性 | 類型 | 描述 |
|---|---|---|
| data | Object | 頁(yè)面的初始數(shù)據(jù) |
| onLoad | Function | 生命周期函數(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 | 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面卸載 |
- 小程序注冊(cè)完成后熬苍，加載頁(yè)面，觸發(fā)onLoad方法袁翁。
- 頁(yè)面載入后觸發(fā)onShow方法柴底，顯示頁(yè)面。
- 首次顯示頁(yè)面粱胜，會(huì)觸發(fā)onReady方法柄驻，渲染頁(yè)面元素和樣式，一個(gè)頁(yè)面只會(huì)調(diào)用一次年柠。
- 當(dāng)小程序后臺(tái)運(yùn)行或跳轉(zhuǎn)到其他頁(yè)面時(shí)凿歼，觸發(fā)onHide方法。
- 當(dāng)小程序有后臺(tái)進(jìn)入到前臺(tái)運(yùn)行或重新進(jìn)入頁(yè)面時(shí)冗恨，觸發(fā)onShow方法答憔。
- 當(dāng)使用重定向方法wx.redirectTo(OBJECT)或關(guān)閉當(dāng)前頁(yè)返回上一頁(yè)wx.navigateBack()，觸發(fā)onUnload掀抹。
總結(jié)：
- onLoad: 頁(yè)面加載虐拓。
1)一個(gè)頁(yè)面只會(huì)調(diào)用一次。
2)參數(shù)可以獲取wx.navigateTo和wx.redirectTo及<navigator/>中的 query傲武。- onShow: 頁(yè)面顯示
1)每次打開(kāi)頁(yè)面都會(huì)調(diào)用一次蓉驹。- onReady: 頁(yè)面初次渲染完成
1)一個(gè)頁(yè)面只會(huì)調(diào)用一次城榛，代表頁(yè)面已經(jīng)準(zhǔn)備妥當(dāng)，可以和視圖層進(jìn)行交互态兴。
2)對(duì)界面的設(shè)置如wx.setNavigationBarTitle請(qǐng)?jiān)趏nReady之后設(shè)置狠持。詳見(jiàn)生命周期- onHide: 頁(yè)面隱藏
1)當(dāng)navigateTo或底部tab切換時(shí)調(diào)用。- onUnload: 頁(yè)面卸載
1)當(dāng)redirectTo或navigateBack的時(shí)候調(diào)用瞻润。
示例代碼：
//index.js
Page({
data: {
text: "This is page data."
},
onLoad: function(options) {
// Do some initialize when page load.
},
onReady: function() {
// Do something when page ready.
},
onShow: function() {
// Do something when page show.
},
onHide: function() {
// Do something when page hide.
},
onUnload: function() {
// Do something when page close.
},
onPullDownRefresh: function() {
// Do something when pull down.
},
onReachBottom: function() {
// Do something when page reach bottom.
},
onShareAppMessage: function () {
// return custom share data when user share.
},
// Event handler.
viewTap: function() {
this.setData({
text: 'Set some data for updating view.'
})
},
customData: {
hi: 'MINA'
}
})
三喘垂、用Page 實(shí)例說(shuō)明的頁(yè)面的生命周期
由上圖可知，小程序由兩大線程組成：負(fù)責(zé)界面的視圖線程（view thread）和負(fù)責(zé)數(shù)據(jù)绍撞、服務(wù)處理的服務(wù)線程（appservice thread）正勒，兩者協(xié)同工作，完成小程序頁(yè)面生命周期的調(diào)用傻铣。
視圖線程有四大狀態(tài)：
- 初始化狀態(tài)：初始化視圖線程所需要的工作章贞，初始化完成后向 “服務(wù)線程”發(fā)送初始化完成信號(hào)，然后進(jìn)入等待狀態(tài)非洲，等待服務(wù)線程提供初始化數(shù)據(jù)鸭限。
- 首次渲染狀態(tài)：當(dāng)收到服務(wù)線程提供的初始化數(shù)據(jù)后（json和js中的data數(shù)據(jù)），渲染小程序界面怪蔑，渲染完畢后里覆，發(fā)送“首次渲染完成信號(hào)”給服務(wù)線程丧荐，并將頁(yè)面展示給用戶缆瓣。
- 持續(xù)渲染狀態(tài)：此時(shí)界面線程繼續(xù)一直等待“服務(wù)線程”通過(guò)this.setdata（）函數(shù)發(fā)送來(lái)的界面數(shù)據(jù)，只要收到就重新局部渲染虹统，也因此只要更新數(shù)據(jù)并發(fā)送信號(hào)弓坞，界面就自動(dòng)更新。
- 結(jié)束狀態(tài)：頁(yè)面被回收或者銷毀车荔、應(yīng)用被系統(tǒng)回收渡冻、銷毀時(shí)觸發(fā)。
服務(wù)線程五大狀態(tài)：
- 初始化狀態(tài)：此階段僅啟動(dòng)服務(wù)線程所需的基本功能忧便，比如信號(hào)發(fā)送模塊族吻。系統(tǒng)的初始化工作完畢，就調(diào)用自定義的onload和onshow珠增，然后等待視圖線程的“視圖線程初始化完成”號(hào)超歌。onload是只會(huì)首次渲染的時(shí)候執(zhí)行一次，onshow是每次界面切換都會(huì)執(zhí)行蒂教，簡(jiǎn)單理解巍举，這就是唯一差別。
- 等待激活狀態(tài)：接收到“視圖線程初始化完成”信號(hào)后凝垛，將初始化數(shù)據(jù)發(fā)送給“視圖線程”懊悯，等待視圖線程完成初次渲染蜓谋。
- 激活狀態(tài)：收到視圖線程發(fā)送來(lái)的“首次渲染完成”信號(hào)后，就進(jìn)入激活狀態(tài)既程序的正常運(yùn)行狀態(tài)炭分，并調(diào)用自定義的onReady()函數(shù)桃焕。此狀態(tài)下就可以通過(guò) this.setData 函數(shù)發(fā)送界面數(shù)據(jù)給界面線程進(jìn)行局部渲染，更新頁(yè)面捧毛。
- 后臺(tái)運(yùn)行狀態(tài)：如果界面進(jìn)入后臺(tái)覆旭，服務(wù)線程就進(jìn)入后臺(tái)運(yùn)行狀態(tài)，從目前的官方解讀來(lái)說(shuō)岖妄，這個(gè)狀態(tài)挺奇怪的型将，和激活狀態(tài)是相同的，也可以通過(guò)setdata函數(shù)更新界面的荐虐。畢竟小程序的框架剛推出七兜，應(yīng)該后續(xù)會(huì)有很大不同吧。
- 結(jié)束狀態(tài)：頁(yè)面被回收或者銷毀福扬、應(yīng)用被系統(tǒng)回收腕铸、銷毀時(shí)觸發(fā)。
四铛碑、應(yīng)用的生命周期對(duì)頁(yè)面生命周期的影響
- 小程序初始化完成后狠裹，頁(yè)面首次加載觸發(fā)onLoad，只會(huì)觸發(fā)一次汽烦。
- 當(dāng)小程序進(jìn)入到后臺(tái)涛菠，先執(zhí)行頁(yè)面onHide方法再執(zhí)行應(yīng)用onHide方法。
- 當(dāng)小程序從后臺(tái)進(jìn)入到前臺(tái)撇吞，先執(zhí)行應(yīng)用onShow方法再執(zhí)行頁(yè)面onShow方法俗冻。
