HarmonyOS Next 入门实战 - 导航框架：页面路由、组件导航(Navigation) ...

页面路由

官方不保举使用页面路由，这里仅做简朴先容。
页面路由用于标识 @Entry 注解的页面间的跳转。
包引入
import { router } from’@kit.ArkUI’;
页面跳转

• router.pushUrl 目标页面不会更换当前页，而是压入页面栈
  
• router.replaceUrl 目标页面会更换当前页，并销毁当前页
  

Router模块提供了两种实例模式，分别是Standard和Single，决定了目标url是否会有对应多个实例

1. //无参数跳转
2. router.replaceUrl({
3.     url: 'pages/PageA' // 目标url
4.   }, router.RouterMode.Standard, (err) => {
5.     if (err) {
6.       console.error(`${err.code}, ${err.message}`);
7.       return;
8.     }
9.     console.info('succeeded.');
10.   })
11. //携带参数跳转
12. class DataModel {
13.   name: string = ""
14.   age: number = 0;
15. }
16. toPageA() {
17.   let params: DataModel = {
18.     name: "张三",
19.     age: 20,
20.   }
21.   router.pushUrl({
22.     url: "pages/PageA",
23.     params: params
24.   })
25. }
26. //在目标页面获取参数
27. const params: DataModel = router.getParams() as DataModel;

复制代码

页面返回
通过router.back 返回上一个页面或指定页面

1. //返回上一个页面
2. router.back();
3. //返回到指定页面
4. router.back({
5.   url: 'pages/Home'
6. });
7. //返回时传递参数
8. router.back({
9.   url: 'pages/Home',
10.   params: {
11.     info: 'back parmas'
12.   }
13. });
14. //返回参数获取，在返回目标页面的OnPageShow中获取参数
15. onPageShow() {
16.   const params = this.getUIContext().getRouter().getParams() as Record<string, string>; // 获取传递过来的参数对象
17.   if (params) {
18.     const info: string = params.info as string; // 获取info属性的值
19.   }
20. }

复制代码

命名路由

1. @Entry({ routeName: 'pageA' })
2. @Component
3. export struct MyComponent {
4.   build() {
5.     ……
6.   }
7. }
9. toPageA() {
10.   router.pushNamedRoute({
11.     name: "pageA",
12.   })
13. }

复制代码

组件导航(Navigation)

Navigation 是路由容器组件，一般作为首页的根容器，包括单栏(Stack)、分栏(Split)和自适应(Auto)三种表现模式。
在差别尺寸的装备上，Navigation组件能够自适应表现巨细，主动切换分栏展示效果。
Navigation组件主要包罗导航页(NavBar)和子页(NavDestination)。导航页由标题栏(Titlebar，包罗菜单栏menu)、内容区(Navigation子组件)和工具栏(Toolbar)组成，其中导航页可以通过 hideNavBar 属性进行隐藏，导航页不存在页面栈中，导航页和子页，以及子页之间可以通过路由操作进行切换。
表现模式
单页面模式示意图

分栏模式示意图

• 自适应模式：NavigationMode.Auto
  
• 单页面模式：NavigationMode.Stack
  
• 分栏模式：NavigationMode.Split
  

1. Navigation() {
2.   // ...
3. }
4. .mode(NavigationMode.Stack)  //页面模式设置为单页面模式

复制代码

标题栏
标题栏模式包括：Mini模式和Full模式
Mini模式示意图

Full模式示意图

菜单栏
菜单栏位于Navigation组件的右上角，通过menus属性进行设置。转达数组时，竖屏最多支持表现3个图标，横屏最多支持表现5个图标，多余的图标会被放入主动生成的更多图标。
菜单栏支持 CustomBuilder 参数，用来传入自界说布局。
工具栏
工具栏位于Navigation组件的底部，通过toolbarConfiguration属性进行设置。
工具栏支持 CustomBuilder 参数，用来传入自界说布局。

1. navPathStack: NavPathStack = new NavPathStack()
3. Navigation(this.navPathStack) {
4.   // ...
5. }
6. .titleMode(NavigationTitleMode.Full)  //设置标题栏模式
7. .menus([{   //设置菜单栏
8.   value:"menu1",
9.   icon:"resources/base/media/icon1.png",
10.   action:()=>{
12.   }
13. },{
14.   value:"menu2",
15.   icon:"resources/base/media/icon2.png",
16.   action:()=>{
18.   }
19. }])
20. .toolbarConfiguration([  //设置工具栏
21.   {
22.     value: "tab1",
23.     icon: $r('app.media.scan_multiple_result'),
24.     action:()=>{
26.     }
27.   },
28.   {
29.     value: "tab2",
30.     icon: $r('app.media.scan_one_result'),
31.     action:()=>{
33.     }
34.   },,
35.   {
36.     value: "tab3",
37.     icon: $r('app.media.startIcon'),
38.     action:()=>{
40.     }
41.   },
42. ])

复制代码

路由表配置

• 创建跳转页面入口Builder函数
  

1. @Builder
2. export function PageOneBuilder() {
3.   PageOne()
4. }
6. @Component
7. export struct PageOne {
8.   @Consume('navPathStack') navPathStack: NavPathStack
10.   build() {
11.     NavDestination() {
12.     }.title("Page1")
13.   }
14. }

复制代码

• 在resources/base/profile中创建route_map.json文件，配置如下：
  name：路由名称
  pageSourceFile：目标页在保内的路径，相对src目录的相对路径
  buildFunction：跳转目标页的入口函数名称，必须以@Builder修饰
  data：应用自界说字段。可以通过配置项读取接口getConfigInRouteMap获取
  

1. {
2.   "routerMap": [
3.     {
4.       "name": "PageOne",
5.       "pageSourceFile": "src/main/ets/pages/PageOne.ets",
6.       "buildFunction": "PageOneBuilder",
7.       "data": {
8.         "description" : "this is PageOne"
9.       }
10.     }
11.   ]
12. }

复制代码

• 配置文件module.json5添加路由表配置
  

1. {
2.     "module" : {
3.       "routerMap": "$profile:route_map"
4.     }
5.   }

复制代码

路由表另一种实现方式：

• 创建Builder函数
  
• 通过Navigation的navDestination()方法创建路由表
  

1. @Builder
2. PageMap(name: string) {
3.   if (name === "page1") {
4.     PageOne()
5.   } else if (name === "page2") {
6.     PageTwo()
7.   } else if (name === "page3") {
8.     PageThree()
9.   }
10. }
12. Navigation(this.navPathStack) {
13.   ……
14. }.navDestination(this.PageMap)

复制代码

页面导航
页面导航通过 NavPathStack 的相关接口实现

1. //跳转page1
2. this.navPathStack.pushPath({ name: "page1", param: "page1 param" })
3. this.navPathStack.pushPathByName("page1", "page1 param")
4. //带回调跳转，在目标页关闭后获取返回信息
5. this.navPathStack.pushPathByName("page1", "page1 param",(popInfo)=>{
6.   console.log('Pop page name is: ' + popInfo.info.name + ', result: ' + JSON.stringify(popInfo.result))
7. })
8. //跳转并获取跳转结果信息
9. this.navPathStack.pushDestination({name:"page1",param:"page1 param"})
10.   .then(()=>{
11.     console.info('success');
12.   })
13.   .catch((err:BusinessError)=>{
14.     console.info(`${err.code} - ${err.message}`);
15.   })
18. //替换当前页面
19. this.navPathStack.replacePath({ name: "page1", param: "page1 param" })
22. //返回前一个页面
23. this.navPathStack.pop()
24. //返回到指定页面
25. this.navPathStack.popToName("page1")
28. //删除栈中所有name=page1的页面
29. this.navPathStack.removeByName("page1")
30. //删除栈中指定索引的页面
31. this.navPathStack.removeByIndexes([1,2])
34. //获取page1页面的参数
35. this.navPathStack.getParamByName("page1")
36. //所有栈中索引1的页面参数
37. this.navPathStack.getParamByIndex(1)
38. //所有page1页面的索引集合
39. this.navPathStack.getIndexByName("page1")

复制代码

子页面
子页面有容器 NavDestination 包裹，可以设置生命周期，独立的标题栏，菜单栏等属性，使用方法与navigation相同，其中mode属性可以指定页面范例。
页面范例：

• 标准范例：mode为NavDestinationMode.STANDARD，为默认范例，生命周期跟随其在NavPathStack页面栈中的位置厘革而改变。
  
• 弹窗范例：mode为NavDestinationMode.DIALOG，表现为透明窗体，表现和消失时不会影响下层标准范例页面的表现和生命周期。
  

页面生命周期
Navigation作为路由容器，其生命周期承载在NavDestination组件上，以组件变乱的情势开放。
● aboutToAppear和aboutToDisappear是自界说组件的生命周期
● OnAppear和OnDisappear是组件的通用生命周期
● 其余六个生命周期为NavDestination独有

1. @Component
2. export struct PageTwo {
3.   @Consume('navPathStack') navPathStack: NavPathStack
5.   build() {
6.     NavDestination() {
7.       Column() {
8.         Text("page2").geometryTransition("text2")
9.       }.width('100%').height('100%')
10.     }.title("Page2")
11.   }
12. }

复制代码

路由拦截
NavPathStack提供了setInterception方法，用于设置Navigation页面跳转拦截回调。该方法需要传入一个NavigationInterception对象。
NavigationInterception包罗三个回调函数

• willShow：页面跳转前回调，允许操作栈，在当前跳转生效。
  
• didShow：页面跳转后回调，在该回调中操作栈会在下一次跳转生效。
  
• modeChange：Navigation单双栏表近况态发生变更时触发该回调。
  无论是哪个回调，在进入回调时页面栈都已经发生了厘革。
  

1. this.navPathStack.setInterception({
2.   willShow: (_from, _to, _operation, _animated) => {
3.     if (typeof _to === "object") {
4.       let target = _to as NavDestinationContext
5.       if (target.pathInfo.name == "page1") {
6.         target.pathStack.pop()
7.         target.pathStack.pushPath({ name: "page2" })
8.       }
9.     }
10.   }
11. })

复制代码

---

本文的技能设计和实现都是基于作者工作中的经验总结，如有错误，请留言指正，谢谢。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。