前言
HMRouter 作為 HarmonyOS 的頁面跳轉(zhuǎn)場(chǎng)景解決方案，聚焦解決應(yīng)用內(nèi)原生頁面的跳轉(zhuǎn)邏輯。
HMRouter 底層對(duì)系統(tǒng) Navigation 進(jìn)行封裝，集成了 Navigation、NavDestination、NavPathStack 的系統(tǒng)能力，提供了可復(fù)用的路由攔截、頁面生命周期、自定義轉(zhuǎn)場(chǎng)動(dòng)畫，并且在跳轉(zhuǎn)傳參、額外的生命周期、服務(wù)型路由方面對(duì)系統(tǒng)能力進(jìn)行了擴(kuò)展。
目的是讓開發(fā)者在開發(fā)過程中無需關(guān)注 Navigation、NavDestination 容器組件的相關(guān)細(xì)節(jié)及模板代碼，屏蔽跳轉(zhuǎn)時(shí)的判斷邏輯，降低攔截器、自定義轉(zhuǎn)場(chǎng)動(dòng)畫實(shí)現(xiàn)復(fù)雜度，更好的進(jìn)行模塊間解耦
對(duì)比
目前鴻蒙應(yīng)用開發(fā)中，官方推出的路由方案有兩個(gè)，分別是Router和Navigation。目前官方主要推薦的也是 Navigation。
但是原生的 Navigation 缺少了路由攔截、頁面生命周期、自定義轉(zhuǎn)場(chǎng)動(dòng)畫，并且在跳轉(zhuǎn)傳參、額外的生命周期、服務(wù)型路由。
因此 HMRouter 便是對(duì)此做出了拓展和增強(qiáng)。
學(xué)習(xí)目標(biāo)
接下來，將通過這篇文章帶領(lǐng)小伙伴上手HMRouter的應(yīng)用。
工程目錄
新建完工程后，再新建一個(gè) Cart 動(dòng)態(tài)共享包模塊
1. 工程的目錄名稱是 study
2. 入口模塊是 entry
3. cart 是 hsp 模塊
配置環(huán)境
使用 ohpm 安裝依賴
編譯插件配置
修改工程的hvigor/hvigor-config.json文件，加入路由編譯插件
在使用到 HMRouter 的模塊中引入路由編譯插件，修改hvigorfile.ts
我們項(xiàng)目的模塊無非是 Hap、Har 和 Hsp。對(duì)應(yīng)你當(dāng)前的模塊是哪種類型，就使用對(duì)應(yīng)的寫法
Hap
Har
Hsp
初始化路由框架
entry/src/main/ets/entryability/EntryAbility.ets
定義路由入口
entry/src/main/ets/pages/Index.ets
當(dāng)前頁面作為整個(gè)路由的根容器
模塊內(nèi)跳轉(zhuǎn)
我們先演示跳轉(zhuǎn)到當(dāng)前模塊中的某個(gè)頁面。
HMRouter 默認(rèn)指定了 頁面目錄 為 entry/src/main/ets/components
我們?cè)谶@個(gè)里新建一個(gè)組件 entry/src/main/ets/components/LoginPage.ets
此時(shí)，回到首頁中，進(jìn)行點(diǎn)擊跳轉(zhuǎn)登錄
路由傳參
傳遞
接收
指定編譯目錄
剛才的登錄頁面是存放到 components 目錄下的，實(shí)際開發(fā)中，我們可以會(huì)通過 views來存放頁面，所以這里來設(shè)置下
在項(xiàng)目根目錄創(chuàng)建路由編譯插件配置文件study/hmrouter_config.json（可選）
然后重命名之前的文件夾名字 entry/src/main/ets/components 為 entry/src/main/ets/views
重新編譯執(zhí)行即可
模塊之間跳轉(zhuǎn)
剛才的演示是在同一個(gè)模塊內(nèi)進(jìn)行的，現(xiàn)在我們來演示不同模塊之間的跳轉(zhuǎn)
演示的目標(biāo)是 entry 模塊跳轉(zhuǎn)到 cart 模塊
cart 模塊配置編譯插件
cart 是 hsp
cart/hvigorfile.ts
新建購物詳情頁面
cart/src/main/ets/views/CartDetail.ets
entry 模塊引入 cart 模塊
entry/oh-package.json5
首頁中進(jìn)行跳轉(zhuǎn)
entry/src/main/ets/pages/Index.ets
效果
跳轉(zhuǎn)動(dòng)畫
我們可以在跳轉(zhuǎn)頁面的時(shí)候來指定跳轉(zhuǎn)動(dòng)畫
分類兩個(gè)步驟
1. 定義動(dòng)畫
2. 使用動(dòng)畫
定義動(dòng)畫
假設(shè) A 跳轉(zhuǎn) B, 那么就是 B 使用動(dòng)畫，為了方便使用，可以在 B 頁面定義動(dòng)畫
我們繼續(xù)使用上面的例子
index 跳轉(zhuǎn)到 CarDetail ， 所以在 CarDetail 定義動(dòng)畫
cart/src/main/ets/views/CartDetail.ets
使用動(dòng)畫
在 HMRouter 上使用
效果
攔截器
攔截器可以分成 2 種，局部攔截器和全局?jǐn)r截器
標(biāo)記在實(shí)現(xiàn)了IHMInterceptor的對(duì)象上，聲明此對(duì)象為一個(gè)攔截器
· interceptorName: string, 攔截器名稱，必填
· priority: number, 攔截器優(yōu)先級(jí)，數(shù)字越大優(yōu)先級(jí)越高，非必填，默認(rèn)為 9；
· global: boolean, 是否為全局?jǐn)r截器，當(dāng)配置為 true 時(shí)，所有跳轉(zhuǎn)均過此攔截器；默認(rèn)為 false，當(dāng)為 false 時(shí)需要配置在@HMRouter 的 interceptors 中才生效。
執(zhí)行時(shí)機(jī)：
在路由棧發(fā)生變化前，轉(zhuǎn)場(chǎng)動(dòng)畫發(fā)生前進(jìn)行回調(diào)。
1.當(dāng)發(fā)生 push/replace 路由時(shí)，pageUrl 為空時(shí)，攔截器不會(huì)執(zhí)行，需傳入 pageUrl 路徑；
2.當(dāng)跳轉(zhuǎn) pageUrl 目標(biāo)頁面不存在時(shí)，執(zhí)行全局以及發(fā)起頁面攔截器，當(dāng)攔截器未執(zhí)行 DO_REJECT 時(shí)，然后執(zhí)行路由的 onLost 回調(diào)
3.當(dāng)跳轉(zhuǎn) pageUrl 目標(biāo)頁面存在時(shí)，執(zhí)行全局，發(fā)起頁面和目標(biāo)頁面的攔截器；
攔截器執(zhí)行順序：
1.按照優(yōu)先級(jí)順序執(zhí)行，不區(qū)分自定義或者全局?jǐn)r截器，優(yōu)先級(jí)相同時(shí)先執(zhí)行@HMRouter 中定義的自定義攔截器
2.當(dāng)優(yōu)先級(jí)一致時(shí)，先執(zhí)行 srcPage>targetPage>global
srcPage 表示跳轉(zhuǎn)發(fā)起頁面。
targetPage 表示跳轉(zhuǎn)結(jié)束時(shí)展示的頁面。
局部攔截器
局部攔截器只對(duì)單個(gè)頁面生效。我們拿 登錄頁面來測(cè)試 從首頁 跳轉(zhuǎn)到登錄頁面，登錄頁面的攔截器便會(huì)觸發(fā)
entry/src/main/ets/views/LoginPage.ets
定義攔截器
使用攔截器
輸出效果
全局?jǐn)r截器
直接在 index 頁面上使用
生命周期
標(biāo)記在實(shí)現(xiàn)了 IHMLifecycle 的對(duì)象上，聲明此對(duì)象為一個(gè)自定義生命周期處理器
· lifecycleName: string, 自定義生命周期處理器名稱，必填
· priority: number, 生命周期優(yōu)先級(jí)，數(shù)字越大優(yōu)先級(jí)越高，非必填，默認(rèn)為 9；
· global: boolean, 是否為全局生命周期，當(dāng)配置為 true 時(shí)，所有頁面生命周期事件會(huì)轉(zhuǎn)發(fā)到此對(duì)象；默認(rèn)為 false
生命周期觸發(fā)順序：
按照優(yōu)先級(jí)順序觸發(fā)，不區(qū)分自定義或者全局生命周期，優(yōu)先級(jí)相同時(shí)先執(zhí)行@HMRouter 中定義的自定義生命周期
我們可以繼續(xù)在登錄頁面上測(cè)試對(duì)應(yīng)的生命周期
entry/src/main/ets/views/LoginPage.ets
定義生命周期
使用生命周期
完整生命周期
頁面組件和生命周期數(shù)據(jù)交互
生命周期實(shí)例中可以初始化對(duì)象，并且在UI組件中獲取做為狀態(tài)變量
小結(jié)
hmrouter 的官網(wǎng)文檔還是挺零散的，需要結(jié)合文檔配套學(xué)習(xí)使用
HMRouter 接口和屬性列表：https://gitee.com/hadss/hmrouter/blob/dev/docs/Reference.md
HMRouterPlugin 編譯插件使用說明：https://gitee.com/hadss/hmrouter/blob/dev/HMRouterPlugin/README.md
HMRouterTransitions 高階轉(zhuǎn)場(chǎng)動(dòng)畫使用說明：https://gitee.com/hadss/hmrouter/blob/dev/HMRouterTransitions/README.md
自定義模板使用說明：https://gitee.com/hadss/hmrouter/blob/dev/docs/CustomTemplate.md
自定義轉(zhuǎn)場(chǎng)動(dòng)畫使用說明：https://gitee.com/hadss/hmrouter/blob/dev/docs/CustomTransition.md
原生到原生頁面跳轉(zhuǎn)場(chǎng)景解決方案：https://gitee.com/hadss/hmrouter/blob/dev/docs/Scene.md
SampleCode：https://gitee.com/harmonyos_samples/HMRouter
更多示例：https://gitee.com/hadss/hmrouter/tree/dev/HMRouterExamples
FAQ：https://gitee.com/hadss/hmrouter/blob/dev/docs/FAQ.md
原理介紹：https://developer.huawei.com/consumer/cn/forum/topic/0207153170697988820?fid=0109140870620153026
踏入鴻蒙世界的敲門磚，標(biāo)志著您在技術(shù)征途上的全新起點(diǎn)，提升就業(yè)競(jìng)爭(zhēng)力，獲得行業(yè)認(rèn)可，點(diǎn)亮職業(yè)成長(zhǎng)先機(jī)，快人一步搶占未來應(yīng)用開發(fā)賽道！
