【鸿蒙开发实战知识】鸿蒙页面跳转 Navigation

前言

不久前华为已经宣布全新HarmonyOS NEXT 鸿蒙星河版将在今年秋天正式和消费者见面，并已经面向开发者开放申请。鸿蒙星河版会有更智能、更极致的原生体验，也标志着鸿蒙迈向其发展的第二阶段。

因此，对于鸿蒙生态建设而言，2024年可谓至关重要，而生态建设的前提，就是要有足够的开发人才。与之对应的，今年春招市场上与鸿蒙相关岗位和人才旺盛的热度，一方面反应了鸿蒙生态的逐渐壮大，另一方面也让人们对鸿蒙下一阶段的发展更具信心。

随着鸿蒙市场份额的不断提升，相应的岗位也会迎来一个爆发式的增长。这对于想要换赛道的程序员来说是一个非常好的消息，话说大家最近有想法转型鸿蒙开发吗？

今天来讲一讲鸿蒙页面如何跳转 Navigation

场景：多har包之间的页面跳

A.har中的A需要跳转到B.har的B中，由于A.har与B.har之间由不同业务开发，互相隔离。如果A.har要跳转到B.har，必然需要配置依赖，引入B.har。如果B.har开发不完善或存在运行bug，就必然影响互相开发效率。
如下图所示：

鸿蒙官方给的解决方案：提升两个包之间的互相依赖到另一个共用路由模块中。如果对android开发熟悉的小伙伴，可能想到了jetpack中同名的库。依赖方案如下图所示：

逻辑实现

路由模块的实现

RouterModule模块包括：全局路由栈（NavPathStack）和路由表信息（Map）。

1.路由栈及路由表

export class RouterModule {
    // WrapperBuilder 支持@Builder描述的组件，以参数形式进行封装存储
    static buildMap: Map<string, WrapperBuilder<[object]>> = new Map<string, WrapperBuilder<[object]>>()
    // 路由栈，会关联Navigtion组件
    static navPathStack: NavPathStack = new NavPathStack()
}

2.注册页面组件到路由表，以及获取路由页面

export class RouterModule {
    public static registerBuilder(builderName: string, builder: WrapperBuilder<[object]>): void {
        RouterModule.buildMap.set(builderName, builder)
    }

    public static getBuilder(builderName: string): WrapperBuilder<[object]> {
        const builder = RounterModule.builderMap.get(builderName)
        if (!builder) {
            // not found builder
        }
        return builder as WrapperBuilder<[object]>
    }
}

3.路由跳转

export class RouterModule {
    // 通过获取页面栈跳转到指定页面
    public static async push(harName: string, builderName: string): Promise<void> {
        // 动态导入页面所在har模块，避免业务har模块中显示依赖其他har模块，实现按需加载
        await import(harName);
        // 通过路由栈的方法，按路由名字进行路由跳转
        RouterModule.navPathStack.pushPathByName(builderName, null);
    }
}

补充：个人理解，这个模块应该算是Navigation的组件模块之一，但不知道为什么需要开发者自己去实现。

页面跳转实现

1.工程主模块加入RouterModule模块，和需要路由的har模块

// Entry.hap中的oh-package.json5文件
"dependencies": {
  "@ohos/routermodule": "file:../RouterModule",
  "@ohos/hara": "file:../harA",
  "@ohos/harb": "file:../harB"
}

2.由主工程关联上路由

struct EntryHap {
    @State entryHapARouter: NavPathStack = new NavPathStack();

    aboutToAppear() {
        if (!this.entryHapARouter) {
            this.entryHapARouter = new NavPathStack();
        }
        RouterModule.createRouter('EntryHapA_Router', this.entryHapARouter);
    };

    @Builder
    routerMap(builderName: string, param: object) {
        // 从RouterModule中获取全局路由表
        RouterModule.getBuilder(builderName).builder(param);
    }

    build() {
        // 绑定RouterModule中路由栈
        Navigation(RouterModule.navPathStack) {
            // ...
        }
        .navDestination(this.routerMap); // 从RouterModule中获取全局路由表
    }
}

3.在harB中声明需要跳转的页面，并且调用registerBuilder接口将页面注册到RouterModule模块的全局路由表上。以下注册逻辑会在harB的B1页面被首次加载时触发。

// harB模块的B1页面
@Builder
export function harBuilder(value: object) {
  NavDestination() {
    Column() {
      // ...
    }
  }
}

// 在页面首次加载时触发执行
let builderName = 'B1';
// 避免重复注册
if (!RouterModule.getBuilder(builderName)) {
  // 通过系统提供的wrapBuilder接口封装@Builder装饰的方法，生成harB1页面builder
  let builder: WrappedBuilder<[object]> = wrapBuilder(harBuilder);
  // 注册harB1页面到全局路由表
  RouterModule.registerBuilder(builderName, builder);
}

4.动态加载，harB对外提供导出类index.ets，定义加载初始化函数。

export function harInit(name: string): void {
  // 根据routerModule中路由表的key值动态加载要跳转的页面的相对路径
  switch (name) {
    case "B1":
      import("./src/main/ets/components/mainpage/B1");
      break;
    case "B2":
      import("./src/main/ets/components/mainpage/B2");
      break;
    case "B3":
      import("./src/main/ets/components/mainpage/B3");
      break;
    default:
      break;
  }
}

4.在harA模块中的A1页面调用RouterModule模块的push方法实现跳转到harB的B1页面。当harB的B1页面被首次通过push方法跳转时，会动态加载B1页面，并且触发步骤3中B1页面的路由注册逻辑，把B1页面注册到RouterModule的全局路由表builderMap中

@Builder
export function harBuilder(value: object) {
    NavDestination() {
        Column() {
            Button($r("app.string.to_harb_page1"), { stateEffect: true, type: ButtonType.Capsule })
                .onClick(() => {
                    // 首次调用B1的push时，会动态加载B1页面并且触发页面注册逻辑
                    RouterModule.push('@ohos/harb/src/main/ets/components/mainpage/B1', 'B1');
                })
        }
        .width('100%')
        .height('100%')
    }
        .title('A1Page')
        .onBackPressed(() => {
            RouterModule.pop(RouterNameConstants.ENTRY_HAP);
            return true;
        })
}

说明：步骤3中是在builder中才完成页面的注册，而在步骤4的注册阶段这里，调用push时，采用动态加载的页面加载的方式，触发了builder方法，完成了注册。
注意：route方案将会被官方放弃，页面之间的路由方案，请优先选择Navigation。

写在最后

有很多小伙伴不知道该从哪里开始学习鸿蒙开发技术？也不知道鸿蒙开发的知识点重点掌握的又有哪些？自学时频繁踩坑，导致浪费大量时间。结果还是一知半解。所以有一份实用的鸿蒙（HarmonyOS NEXT）全栈开发资料用来跟着学习是非常有必要的。

这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了

最新鸿蒙全栈开发学习线路

鸿蒙HarmonyOS开发教学视频

大厂面试真题

鸿蒙OpenHarmony源码剖析

这份资料能帮住各位小伙伴理清自己的学习思路，更加快捷有效的掌握鸿蒙开发的各种知识。有需要的小伙伴自行领取，，先到先得~无套路领取！！

获取这份完整版高清学习路线，请点击→鸿蒙全栈开发学习资料