大家好！我是黑臂麒麟（起名原因：一個出生全右臂自帶紋身的高質(zhì)量程序員😏），也是一位6+（約2個半坤年）的前端；
學(xué)習(xí)如像練武功一樣，理論和實踐要相結(jié)合，學(xué)一門只是也是一樣；
這里會用兩周的時間把所學(xué)的常用ArkUI基礎(chǔ)的常用組件輸出在網(wǎng)；
如需深究可前往高級ArkTS系列課程；
望對學(xué)習(xí)鴻蒙小伙伴有所幫助；

介紹

Navigation組件：是路由導(dǎo)航根視圖容器，一般作為Page頁面(@Entry修飾符)的component作為根容器使用。在應(yīng)用開發(fā)中起到了模塊內(nèi)和跨模塊（對于在想要跳轉(zhuǎn)到的共享包HAR/HSP頁面里）的路由切換。

作為前端工程師，使用慣了vue-router/react-router，在使用Navigation有一定的學(xué)習(xí)成本，但使用起來后會發(fā)現(xiàn)其用法和vue-router/react-router的用法很像。

Navgiation

介紹

這里實現(xiàn)組件跳轉(zhuǎn)要利用到Navigation組件、NavDestination組件、NavPathStack來實現(xiàn)跳轉(zhuǎn)，這里簡單介紹：

• Navigation路由導(dǎo)航根容器,包括標(biāo)題欄、菜單欄、工具欄等。
• NavDestination是Navigation子頁面的根容器用于承載子頁面的一些特殊屬性以及生命周期等，結(jié)構(gòu)屬性上跟Navigation一樣
• NavPathStack管理路由容器

跳轉(zhuǎn)

在使用navigation編寫路由頁面，一般navigation作為路由的根頁面。在配合NavPathStack管理子路由NavDestination頁面

  private arr: number[] = [1, 2, 3];@Provide('pageInfos') pageInfos: NavPathStack = new NavPathStack()private TooTmpItem: NavigationMenuItem = {'value': "", 'icon': "resources/base/media/ic_01_on.svg", 'action': ()=> {}}@State menuItems: Array<NavigationMenuItem> = [{value: 'menuItem1',icon: 'resources/base/media/ic_01_on.svg', // 圖標(biāo)資源路徑action: () => {}}]// 根據(jù)name，跳轉(zhuǎn)相應(yīng)的子路由頁面@BuilderpageMap(name: string){if (name === 'NavDestinationTitle1'){pageOneTmp()}else if(name === 'NavDestinationTitle2'){pageTweTmp()}else if(name === 'NavDestinationTitle3'){pageThreeTmp()}}build() {Column(){Navigation(this.pageInfos){TextInput({ placeholder: 'search...' })...List({ space: 12 }){ForEach(this.arr, (item: number)=> {ListItem() {Text("NavRouter" + item)....onClick(() => {this.pageInfos.pushPath({name: "NavDestinationTitle" + item})})}}, (item: number) => item.toString())}...}.title("根路由頁面") // navigation的標(biāo)題.titleMode(NavigationTitleMode.Mini) // 標(biāo)題模式 可選值：Mini、Normal、Full.mode(NavigationMode.Stack) // navigation頁面顯示模式：Stack（非折疊屏手機(jī)模式/正常顯示屏幕）、Split（折疊屏手機(jī)/屏幕較大）、auto（自動判斷）.menus([this.TooTmpItem, this.TooTmpItem, this.TooTmpItem]) // 導(dǎo)航欄菜單按鈕.navDestination(this.pageMap) // 路由容器.toolbarConfiguration([this.TooTmp, this.TooTmp, this.TooTmp]) // tabbar的配置}}@Component
export struct pageOneTmp {@Consume('pageInfos') pageInfos: NavPathStack;build() {NavDestination(){Column(){Text('NavDestinationContent1')}.width('100%').height('100%')}.title('子頁面1').onBackPressed(() => {const popDestinationInfo = this.pageInfos.pop() // 彈出路由棧棧頂元素console.log('pop' + '返回值' + JSON.stringify(popDestinationInfo))return true})}
}@Component
export struct pageTweTmp {@Consume('pageInfos') pageInfos: NavPathStack;build() {NavDestination(){Column(){Text('NavDestinationContent2')}.width('100%').height('100%')}.title("子頁面2").onBackPressed(() => {const popDestinationInfo = this.pageInfos.pop() // 彈出路由棧棧頂元素console.log('pop' + '返回值' + JSON.stringify(popDestinationInfo))return true})}
}

在Navigtion的屬性navDestination，我們傳入路由容器，根據(jù)name不同，渲染不同的頁面。

子頁面之間跳轉(zhuǎn)

介紹子頁面跳轉(zhuǎn)之前會用到系統(tǒng)路由表，我們先介紹：

1. 在跳轉(zhuǎn)目標(biāo)模塊的配置文件module.json5添加路由表配置：

{"module" : {"routerMap": "$profile:route_map"}
}

2. 添加完路由配置文件地址后，需要在工程resources/base/profile中創(chuàng)建route_map.json文件。添加如下配置信息：

{"routerMap": [{"name": "PageOne", // 跳轉(zhuǎn)頁面名稱。"pageSourceFile": "src/main/ets/pages/PageOne.ets", // 跳轉(zhuǎn)目標(biāo)頁在包內(nèi)的路徑，相對src目錄的相對路徑。"buildFunction": "PageOneBuilder", // 	跳轉(zhuǎn)目標(biāo)頁的入口函數(shù)名稱，必須以@Builder修飾。"data": { // 應(yīng)用自定義字段?？梢酝ㄟ^配置項讀取接口getConfigInRouteMap獲取。"description" : "this is PageOne"}}]
}

3. 在跳轉(zhuǎn)目標(biāo)頁面中，需要配置入口Builder函數(shù)，函數(shù)名稱需要和route_map.json配置文件中的buildFunction保持一致，否則在編譯時會報錯。

// 跳轉(zhuǎn)頁面入口函數(shù)
@Builder
export function PageOneBuilder() {PageOne()
}@Component
struct PageOne {pathStack: NavPathStack = new NavPathStack()build() {NavDestination() {}.title('PageOne').onReady((context: NavDestinationContext) => {this.pathStack = context.pathStack})}
}

4. 通過pushPathByName等路由接口進(jìn)行頁面跳轉(zhuǎn)。(注意：此時Navigation中可以不用配置navDestination屬性)。

@Entry
@Component
struct Index {
pageStack : NavPathStack = new NavPathStack();build() {Navigation(this.pageStack){}.onAppear(() => {this.pageStack.pushPathByName("PageOne", null, false);}).hideNavBar(true)
}
}

上面就是配置系統(tǒng)路由表，然后就能實現(xiàn)子頁面之間的跳轉(zhuǎn),下面是完整代碼。

// PageOne.ets
@Builder
export function PageOneBuilder(name: string, param: Object){PageOne()
}@Component
export struct PageOne {pageInfos: NavPathStack = new NavPathStack()build() {NavDestination(){Column() {Button('pushPathByName', { stateEffect: true, type: ButtonType.Capsule }).onClick(() => {let tmp = new TmpClass();this.pageInfos.pushPathByName('pageTwo', tmp)})}.width('100%').height('100%')}.title('pageOne').onReady((context: NavDestinationContext) => {this.pageInfos = context.pathStack;})}
}

PageTwo.ets
@Builder
export function PageTwoBuilder(name: string, param: Object){PageTwo()
}
@Component
export struct PageTwo{pathStack: NavPathStack = new NavPathStack();build() {NavDestination() {Column(){Button('pushPathByName', { stateEffect: true, type: ButtonType.Capsule }).onClick(() => {console.info("1231231")this.pathStack.pushPathByName('pageOne', null)})}.width('100%').height('100%')}.title('pageTwo').onReady((context: NavDestinationContext) => {this.pathStack = context.pathStack;console.log('current page config info is' + JSON.stringify(context.getConfigInRouteMap()))})}
}

在我們配置了系統(tǒng)路由后，上面pageOne和pageTwo子頁面我們定義NavPathStack路由棧，然后在onReady中獲取到路由棧，然后在利用pushPtahName的方法進(jìn)行頁面跳轉(zhuǎn)。

攔截

NavPathStack提供了setInterception方法，用于設(shè)置Navigation頁面跳轉(zhuǎn)攔截回調(diào)。該方法需要傳入一個NavigationInterception對象，該對象包含三個回調(diào)函數(shù)：

this.pageInfos.setInterception({// 頁面跳轉(zhuǎn)前回調(diào)，允許操作棧，在當(dāng)前跳轉(zhuǎn)生效。willShow: (form: NavDestinationContext | "navBar", to: NavDestinationContext | "navBar", operation: NavigationOperation, animated: boolean) => {if (typeof to === "string") {console.log("target page is navigation home page.");return}// 將跳轉(zhuǎn)PageTwo的路由重定向PageOnelet target: NavDestinationContext = to as NavDestinationContext;if (target.pathInfo.name === "NavDestinationTitle2"){target.pathStack.pop();target.pathStack.pushPath({name: "NavDestinationTitle3"}, false)}},// 頁面跳轉(zhuǎn)后回調(diào)，在該回調(diào)中操作棧會在下一次跳轉(zhuǎn)生效。didShow: (){},// Navigation單雙欄顯示狀態(tài)發(fā)生變更時觸發(fā)該回調(diào)。modeChange: () {}
})

參數(shù)獲取

NavPathStack通過Get相關(guān)接口去獲取頁面的一些參數(shù)。

// 獲取棧中所有頁面name集合
this.pageStack.getAllPathName()
// 獲取索引為1的頁面參數(shù)
this.pageStack.getParamByIndex(1)
// 獲取PageOne頁面的參數(shù)
this.pageStack.getParamByName("PageOne")
// 獲取PageOne頁面的索引集合
this.pageStack.getIndexByName("PageOne")

頁面返回

NavPathStack通過Pop相關(guān)接口去實現(xiàn)頁面返回功能。

// 返回到上一頁
this.pageStack.pop()
// 返回到上一個PageOne頁面
this.pageStack.popToName("PageOne")
// 返回到索引為1的頁面
this.pageStack.popToIndex(1)
// 返回到根首頁（清除棧中所有頁面）
this.pageStack.clear()

子頁面

頁面生命周期

子頁面里比較重要的概念就是生命周期，其生命周期大致可分為三類，自定義組件生命周期、通用組件生命周期和自有生命周期。其中，aboutToAppear和aboutToDisappear是自定義組件的生命周期(NavDestination外層包含的自定義組件)，OnAppear和OnDisappear是組件的通用生命周期。剩下的六個生命周期為NavDestination獨有。
生命周期時序如下圖所示：

• aboutToAppear：在創(chuàng)建自定義組件后，執(zhí)行其build()函數(shù)之前執(zhí)行（NavDestination創(chuàng)建之前），允許在該方法中改變狀態(tài)變量，更改將在后續(xù)執(zhí)行build()函數(shù)中生效。
• onWillAppear：NavDestination創(chuàng)建后，掛載到組件樹之前執(zhí)行，在該方法中更改狀態(tài)變量會在當(dāng)前幀顯示生效。
• onAppear：通用生命周期事件，NavDestination組件掛載到組件樹時執(zhí)行。
• onWillShow：NavDestination組件布局顯示之前執(zhí)行，此時頁面不可見（應(yīng)用切換到前臺不會觸發(fā)）。
• onShown：NavDestination組件布局顯示之后執(zhí)行，此時頁面已完成布局。
• onWillHide：NavDestination組件觸發(fā)隱藏之前執(zhí)行（應(yīng)用切換到后臺不會觸發(fā)）。
• onHidden：NavDestination組件觸發(fā)隱藏后執(zhí)行（非棧頂頁面push進(jìn)棧，棧頂頁面pop出棧或應(yīng)用切換到后臺）。
• onWillDisappear：NavDestination組件即將銷毀之前執(zhí)行，如果有轉(zhuǎn)場動畫，會在動畫前觸發(fā)（棧頂頁面pop出棧）。
• onDisappear：通用生命周期事件，NavDestination組件從組件樹上卸載銷毀時執(zhí)行。
• aboutToDisappear：自定義組件析構(gòu)銷毀之前執(zhí)行，不允許在該方法中改變狀態(tài)變量。

結(jié)語

本篇文章的內(nèi)容結(jié)束了。文章有不對或不完整的地方，望多指點；
望更多小伙伴們加入harmonyOS開發(fā)大家庭，壯大生態(tài)圈，讓鴻蒙更好，讓國產(chǎn)手機(jī)（物聯(lián)網(wǎng)）系統(tǒng)更強(qiáng)大。
如對你學(xué)習(xí)有所幫助，希望可愛你動動小手，關(guān)注、點贊、收藏；