頁面生命周期

在鴻蒙開發(fā)中，Navigation是路由導(dǎo)航的根視圖容器，一般都作為頁面（@Entry裝飾的組件）的根容器，而NavDestination則是Navigation子頁面的根容器。Navigation作為路由容器，它的生命周期承載于NavDestination組件上，以屬性事件的形式提供給開發(fā)者。

其生命周期分為三類，自定義組件生命周期、通用組件生命周期和自有生命周期。

其中，aboutToAppear和aboutToDisappear是自定義組件(NavDestination外層包含的自定義組件，即：@Entry裝飾的頁面組件)的生命周期

其次，OnAppear和OnDisappear是組件的通用生命周期。

剩下的六個生命周期為NavDestination獨有。

當(dāng)我們進入一個頁面，退出一個頁面時，頁面的生命周期函數(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ù))

注意在操作之前，當(dāng)前棧頂頁面已是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ù)