頁面生命周期
在鴻蒙開發(fā)中，Navigation是路由導航的根視圖容器，一般都作為頁面（@Entry裝飾的組件）的根容器，而NavDestination則是Navigation子頁面的根容器。Navigation作為路由容器，它的生命周期承載于NavDestination組件上，以屬性事件的形式提供給開發(fā)者。
其生命周期分為三類，自定義組件生命周期、通用組件生命周期和自有生命周期。
其中，aboutToAppear和aboutToDisappear是自定義組件(NavDestination外層包含的自定義組件，即：@Entry裝飾的頁面組件)的生命周期
其次，OnAppear和OnDisappear是組件的通用生命周期。
剩下的六個生命周期為NavDestination獨有。
當我們進入一個頁面，退出一個頁面時，頁面的生命周期函數(shù)的調(diào)用順序?qū)﹂_發(fā)者來說至關(guān)重要。下面以頁面之間的調(diào)轉(zhuǎn)切換，前后臺的切換為例進行說明。生命周期方法執(zhí)行順序：
一、以頁面PageA為參照按操作順序進行說明，步驟如下：
步驟1：進入頁面PageA
aboutToAppear()
onWillAppear()
onAppear()
onWillShow()
onShown()
步驟2：切后臺
Ability onBackground（Ability生命周期進入后臺函數(shù)）
onHidden() (注意：切后臺不會調(diào)用onWillHidden,只會在頁面跳轉(zhuǎn)時調(diào)用)
步驟3：切前臺
onShown() (注意：切前臺不會調(diào)用onWillShow(),此函數(shù)只在頁面跳轉(zhuǎn)時調(diào)用）
Ability onForeground （Ability生命周期進入前臺函數(shù)）
步驟4：退出PageA頁面
onWillHidden()
onHidden()
onWillDisAppear()
onDisAppear()
aboutToDisappear()
日志截圖如下：
PageA代碼如下：
import { JSON } from '@kit.ArkTS'
import { uiObserver } from '@kit.ArkUI'
@Component
export struct PageA {
? @Consume('NavPathStack') navPathStack: NavPathStack
? navDesInfo: uiObserver.NavDestinationInfo | undefined
? currentPageName: string = 'PageA';
? aboutToAppear(): void {
? ? console.log('-----------------首次進入 PageA 頁面-----------------------')
? ? console.log(this.currentPageName + ';func:' + 'aboutToAppear')
? }
? aboutToDisappear(): void { console.log(this.currentPageName + ';func:' + 'aboutToDisappear'); }
? build() {
? ? NavDestination() {
? ? ? Column({ space: 100 }) {
? ? ? ? Text('pageOne').fontSize(20).fontWeight(200)
? ? ? ? Button('下一頁')
? ? ? ? ? .onClick(() => {
? ? ? ? ? ? console.log('點擊按鈕，進入 PageB 頁面')
? ? ? ? ? ? this.navPathStack.pushDestinationByName('page2', { 'id': '123' }, (popInfo: PopInfo) => {
? ? ? ? ? ? ? // console.log(JSON.stringify(popInfo))
? ? ? ? ? ? });
? ? ? ? ? })
? ? ? ? Button('返回上一頁')
? ? ? ? ? .onClick(() => {
? ? ? ? ? ? console.log('返回上一頁')
? ? ? ? ? ? this.navPathStack.pop('ddd');
? ? ? ? ? })
? ? ? }.width('100%').height('100%')
? ? }
? ? .title('page one')
? ? .onBackPressed(() => {
? ? ? this.navPathStack.pop()
? ? ? return true;
? ? })
? ? .mode(NavDestinationMode.STANDARD)
? ? .onWillAppear(() => { console.log(this.currentPageName + ';func:' + 'onWillAppear'); })
? ? .onWillShow(() => { console.log(this.currentPageName + ';func:' + 'onWillShow') })
? ? .onShown(() => { console.log(this.currentPageName + ';func:' + 'onShown') })
? ? .onWillHide(() => { console.log(this.currentPageName + ';func:' + 'onWillHide'); })
? ? .onHidden(() => { console.log(this.currentPageName + ';func:' + 'onHidden'); })
? ? .onWillDisappear(() => { console.log(this.currentPageName + ';func:' + 'onWillDisappear'); })
? ? .onAppear(() => { console.log(this.currentPageName + ';func:' + 'onAppear'); })
? ? .onDisAppear(() => { console.log(this.currentPageName + ';func:' + 'onDisAppear');? })
? }
}
二、以PageA和PageB兩個頁面減跳轉(zhuǎn)，二者的生命函數(shù)調(diào)用順序
(在調(diào)用pageB的的展示相關(guān)周期函數(shù)的期間，也在調(diào)用PageA的隱藏相關(guān)周期函數(shù))
注意在操作之前，當前棧頂頁面已是PageA頁面，然后進行以下步驟：
步驟1：點擊PageA某按鈕進入PageB，函數(shù)順序如下：
PageB：aboutToAppear()
PageB：onWillAppear()
PageA: onWillHidden()
PageB：onApear()
PageB：onWillShow()
PageA：onHidden()
PageB：onShown()
步驟2：退出PageB頁面（返回PageA頁面）
PageB：onWillHide()
PageA：onWillShow()
PageB：onHidden()
PageB：onWillDisappear()
PageA：onShown()
PageB：onDisappear()
PageB：aboutToDisappear()
日志截圖如下：
PageB代碼如下：
import { BusinessError } from '@kit.BasicServicesKit';
@Component
export struct PageB {
? @Consume('pageInfos') navPathStack: NavPathStack;
? currentPageName: string = 'PageB';
? aboutToAppear(): void {
? ? console.log('-----------------首次進入 PageB 頁面-----------------------')
? ? console.log(this.currentPageName + ';func:' + 'aboutToAppear')
? }
? aboutToDisappear(): void { console.log(this.currentPageName + ';func:' + 'aboutToDisappear');}
? build() {
? ? NavDestination() {
? ? ? Column({ space: 100 }) {
? ? ? ? Text('pageTwo').fontSize(20).fontWeight(200)
? ? ? ? Button('下一頁').onClick((event: ClickEvent) => {
? ? ? ? ? // this.navPathStack.pushPath({name: 'page3', param: ''});
? ? ? ? ? this.navPathStack.pushDestinationByName('page3', '123456')
? ? ? ? ? ? .catch((error: BusinessError) => {
? ? ? ? ? ? ? console.error(`push failed, error code = ${error.code}, error message = ${error.message}`);
? ? ? ? ? ? }).then(() => {
? ? ? ? ? ? console.error('push destination success');
? ? ? ? ? })
? ? ? ? })
? ? ? ? Button('返回上一頁')
? ? ? ? ? .onClick(() => {
? ? ? ? ? ? console.log('返回 PageA 頁面')
? ? ? ? ? ? this.navPathStack.pop({ 'error': 'error -- error', 'status': '-1' });
? ? ? ? ? ? // this.navPathStack.clear() // 返回根頁面
? ? ? ? ? })
? ? ? }.width('100').height('100%')
? ? }
? ? .title('page two')
? ? .onWillAppear(() => { console.log(this.currentPageName + ';func:' + 'onWillAppear'); })
? ? .onAppear(() => { console.log(this.currentPageName + ';func:' + 'onAppear'); })
? ? .onWillShow(() => { console.log(this.currentPageName + ';func:' + 'onWillShow'); })
? ? .onShown(() => { console.log(this.currentPageName + ';func:' + 'onShown'); })
? ? .onWillHide(() => { console.log(this.currentPageName + ';func:' + 'onWillHide'); })
? ? .onHidden(() => { console.log(this.currentPageName + ';func:' + 'onHidden'); })
? ? .onWillDisappear(() => { console.log(this.currentPageName + ';func:' + 'onWillDisappear'); })
? ? .onDisAppear(() => { console.log(this.currentPageName + ';func:' + 'onDisAppear'); })
? }
}
上述函數(shù)中aboutToAppear()和aboutToDisappear()是自定義組件生命周期函數(shù)
onAppear()和onDisappear()函數(shù)是通用組件的生命周期函數(shù),比如column、row、button等都有此周期函數(shù)
剩余六個函數(shù)均為NavDestination的特有生命周期函數(shù)
