快應(yīng)用的生命周期
- 頁(yè)面的生命周期：onInit贾富、onReady蓝撇、onShow、onHide缭裆、onDestroy键闺、onBackPress、onMenuPress
- 頁(yè)面的狀態(tài)： 顯示澈驼、隱藏艾杏、銷毀
- APP的生命周期：onCreate、onDestroy
頁(yè)面的生命周期接口的調(diào)用順序：
- 打開頁(yè)面A：onInit() -> onReady() -> onShow()
- 在頁(yè)面A打開頁(yè)面B：onHide()
- 從頁(yè)面B返回頁(yè)面A：onShow()
- A頁(yè)面返回：onBackPress() -> onHide() -> onDestroy()
頁(yè)面的生命周期
由于頁(yè)面通過(guò) ViewModel 渲染盅藻，那么頁(yè)面的生命周期指的是 ViewModel 的生命周期购桑，包括常見：onInit、onReady氏淑、onShow在頁(yè)面創(chuàng)建時(shí)觸發(fā)調(diào)用勃蜘。
onInit()
表示 ViewModel 的數(shù)據(jù) （event,props,data）已經(jīng)準(zhǔn)備好；所以你可以使用 props, data中的數(shù)據(jù)
data: {
// 生命周期的文本列表
lcList:[]
},
onInit() {
this.$page.setTitleBar({text: '生命周期'})
this.lcList.push('onInit')
console.info('觸發(fā)：onInit')
console.info('執(zhí)行：獲取data的lcList屬性: ${this.lcList}')
}
onReady()
表示 ViewModel 的模板已經(jīng)編譯完成假残，所以你可以獲取DOM節(jié)點(diǎn)
onReady() {
this.lcList.push('onReady')
console.info('觸發(fā)：onReady')
console.info('執(zhí)行：獲取模板節(jié)點(diǎn) ${this. rootElement()}')
}
onShow(),onHide()
App中可以同時(shí)運(yùn)行多個(gè)頁(yè)面缭贡，但是每次只能顯示其中一個(gè)頁(yè)面；這點(diǎn)不同與純前端開發(fā)辉懒，瀏覽器頁(yè)面中每次只能有一個(gè)頁(yè)面阳惹，當(dāng)前頁(yè)簽打開另一個(gè)頁(yè)面，
上一個(gè)頁(yè)面就銷毀了眶俩；不過(guò)和SPA開發(fā)倒有點(diǎn)相似莹汤，切換頁(yè)面但瀏覽器全局Context是共享的
所以頁(yè)面的切換，就產(chǎn)生了新的事件：頁(yè)面被切換隱藏時(shí)調(diào)用onHide(),頁(yè)面被切換重新顯示時(shí)就調(diào)用onShow()
判斷頁(yè)面的顯示狀態(tài)颠印，可以調(diào)用 ViewModel 的 ￥visible 屬性：true：顯示 false:隱藏
onShow() {
this.lcList.push('onShow')
console.info('觸發(fā)：onShow')
console.info('執(zhí)行：獲取頁(yè)面顯示狀態(tài)屬性 ${this.visible}') // true
}
onHide() {
this.lcList.push('onHide')
console.info('觸發(fā)：onHide')
console.info('執(zhí)行：獲取頁(yè)面顯示狀態(tài)屬性 ${this.visible}') // false
}
onDestroy()
頁(yè)面被銷毀時(shí)調(diào)用纲岭，被銷毀的可能原因有：
- 用戶從當(dāng)前頁(yè)面返回到上一個(gè)頁(yè)面
- 用戶打開了太多的頁(yè)面，架構(gòu)自動(dòng)銷毀部分頁(yè)面线罕，避免占用資源
頁(yè)面銷毀時(shí)應(yīng)該做一些釋放資源的操作止潮，比如：取消訂閱監(jiān)聽 geolocation.unsubscribe()
判斷頁(yè)面是否處于被銷毀狀態(tài)，可以調(diào)用 ViewModel 的 $valid 屬性：
true: 存在 false:銷毀
onDestroy() {
this.lcList.push('onDestroy')
console.info('觸發(fā)：onDestroy')
console.info('執(zhí)行：獲取頁(yè)面被銷毀钞楼，銷毀狀態(tài) ${this. $.valid},應(yīng)該做取消接口訂閱監(jiān)聽的操作：geolocation.unsubsrible()')
setTimeout(function() {
console.info('執(zhí)行：頁(yè)面已被銷毀喇闸，不會(huì)執(zhí)行')
}.bind(this), 0)
}
onBackPress()
當(dāng)用戶點(diǎn)擊 返回實(shí)體按鈕、左上角返回按鈕询件、調(diào)用返回API時(shí)觸發(fā)該事件
如果事件響應(yīng)方法最后返回 true 表示不返回燃乍，自己處理業(yè)務(wù)邏輯；
否則：不返回?cái)?shù)據(jù)雳殊，或者返回其它數(shù)據(jù)
onBackPress() {
this.lcList.push('onBackPress')
// true:表示自己處理橘沥，否則默認(rèn)返回上一頁(yè)
// return true
}
onMenuPress()
當(dāng)使用原生的頂部標(biāo)題欄時(shí)，可以通過(guò)manifest.json中的menu屬性配置是否顯示右上角的菜單
"display": {
"titleBarBackgroundColor": "#000000",
"titleBarTextColor": "#ffffff",
"backgroundColor": "#efefef",
"menu": true, #菜單欄是否顯示
"pages": { # 對(duì)應(yīng)每個(gè)頁(yè)面的顯示設(shè)置
"Home": {
"titleBarText": "Gank",
"menu": true // 菜單標(biāo)題欄顯示
},
"About": {
"titleBarText": "關(guān)于",
"menu": false // 菜單標(biāo)題欄隱藏
}
}
}
onMenuPress() {
this.lcList.push('onMenuPress')
console.info('觸發(fā)：onMenuPress()')
}
頁(yè)面的狀態(tài)
App中允許多個(gè)頁(yè)面同時(shí)存在并運(yùn)行夯秃，但當(dāng)前僅顯示其中一個(gè)座咆，因此每個(gè)頁(yè)面就會(huì)處于多個(gè)狀態(tài)的一個(gè)狀態(tài)
- 顯示：該頁(yè)面就是當(dāng)前APP正在顯示的頁(yè)面痢艺，用$visible判斷
- 隱藏：該頁(yè)面上打開新頁(yè)面后，該頁(yè)面被隱藏介陶，用$visible判斷
- 銷毀：該頁(yè)面因某原因銷毀后堤舒，就不會(huì)再執(zhí)行里面的代碼，用$valid判斷
APP的生命周期
APP的生命周期提供了兩個(gè)回調(diào)函數(shù)：onCreate, onDestroy,可以app.ux中定義回調(diào)函數(shù)
export default {
onCreate() {
console.info('Application onCreate')
},
onDestroy() {
console.info('Application onDestroy')
},
// 定義APP數(shù)據(jù)舌缤，可以通過(guò) this.$app.$def.globalData訪問
globalData: {
name: '這是App存的數(shù)據(jù)'
},
// 定義App全局方法某残，可以通過(guò) this.$app.$def.mehtod()訪問
method() {
console.info('這是app的方法')
},
// mainfest
}
關(guān)于$app與$app.$def
$app與$app.$def（后面簡(jiǎn)稱$def）是兩個(gè)不同的對(duì)象；
前者代表框架為開發(fā)者暴露提供的APP對(duì)象玻墅；后者代表開發(fā)者在app.ux中導(dǎo)出的對(duì)象介牙，放置業(yè)務(wù)相關(guān)的全局?jǐn)?shù)據(jù)和方法；
前者對(duì)象擁有onCreate, onDestroy生命周期澳厢；當(dāng)應(yīng)用啟動(dòng)時(shí)會(huì)執(zhí)行onCreate方法，里面執(zhí)行this.variable1的賦值是在$app對(duì)象上剩拢；
后者對(duì)象中的onCreate, onDestroy方法并不會(huì)執(zhí)行，作用僅僅只是把方法復(fù)制到前者對(duì)象上而已徐伐；
