页面生命周期
在鸿蒙开发中，我们一般以Navigation作为路由容器，他的生命周期一般依附于NavDestination组件，当我们进入一个页面，退出一个页面时，页面的生命周期函数的调用顺序对开发者来说至关重要。下面以页面之间的调转切换，前后台的切换为例进行说明。生命周期方法执行顺序：
一、以页面PageA为参照按操作顺序进行说明，步骤如下：
步骤1：进入页面PageA
aboutToAppear()
onWillAppear()
onAppear()
onWillShow()
onShown()
步骤2：切后台
Ability onBackground（Ability生命周期进入后台函数）
onHidden() (注意：切后台不会调用onWillHidden,只会在页面跳转时调用)
步骤3：切前台
onShown() (注意：切前台不会调用onWillShow(),此函数只在页面跳转时调用）
Ability onForeground （Ability生命周期进入前台函数）
步骤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两个页面减跳转，二者的生命函数调用顺序
(在调用pageB的的展示相关周期函数的期间，也在调用PageA的隐藏相关周期函数)
注意在操作之前，当前栈顶页面已是PageA页面，然后进行以下步骤：
步骤1：点击PageA某按钮进入PageB，函数顺序如下：
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'); })
}
}
上述函数中aboutToAppear()和aboutToDisappear()是自定义组件生命周期函数
onAppear()和onDisappear()函数是通用组件的生命周期函数,比如column、row、button等都有此周期函数
剩余六个函数均为NavDestination的特有生命周期函数
网友评论