鸿蒙原生APP开发之应用架构设计(应用导航设计)

最新推荐文章于 2025-11-07 11:36:07 发布

原创

最新推荐文章于 2025-11-07 11:36:07 发布 · 571 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#1024程序员节 #界面布局 #前端 #鸿蒙开发 #ArkUI #harmonyos #组件化

往期推文全新看点

简介

大型应用开发中，应用可能包含不同的业务模块，每个模块由不同的业务团队负责开发。该场景采用一个 Navigation 下多个 har/hsp 的架构，其中一个模块对应一个har/hsp。当多个har/hsp的UI组件存在相互跳转的业务需求时，将出现模块间相互依赖的问题。如“A.har”、“B.har”和“C.har”模块拥有不同的组件，各组件间的路由跳转形成了一个环形链路，导致三个har模块相互耦合，如图所示：

图1 多har包间路由跳转耦合

针对该场景，本文提供了一套基于Navigation的路由设计方案实现多模块路由管理和模块间解耦。并在该基础上，通过动态注册路由的方式，解决页面加载多个UI组件时启动速度变慢问题。

场景描述

假定工程包含harA和harB两个业务模块，harA模块打包编译为A.har，harB模块打包编译为B.har。A.har归属团队A独立开发、编译交付。B.har归属团队B独立开发、编译交付。harA模块中含有页面级组件A1，harB模块中有页面级组件B1、B2、B3。在实际业务中，harA模块中的A1组件需要跳转到harB模块中的B1组件，项目关系如下图所示。例如购物场景，商品选购和结算支付是两个独立的模块，用户在选购完成后，需要进入结算页面进行地址填写和付款等操作。

**图2 **两个har模块间路由跳转

基本解决方案和问题

基本方案实现步骤如下：

在harA模块中的A1页面组件中开发Navigation组件，并关联与之对应的NavPathStack路由栈，示例代码如下：

@Component
struct A1 {
  // 创建NavPathStack路由栈对象
  @State harARouter: NavPathStack = new NavPathStack();

  build() {
    // Navigation组件关联NavPathStack对象
    Navigation(this.harARouter) {
      // ...
    }
  }
}

在harA模块的oh-package.json5文件中添加harB模块的依赖，并且把harB模块中需要跳转的B1组件添加到harA模块的Navigation组件路由表中，示例代码如下

"dependencies": {
  // 添加对harB的依赖
  "@ohos/harb": "file:../harB"
}

在harA模块的A1组件中的routerMap路由表中，添加harB模块的B1组件，示例代码如下：

import { B1 } from '@ohos/harb';
struct A1 {
  @State harARouter: NavPathStack = new NavPathStack();

  @Builder
  routerMap(builderName: string, param: object) {