【鸿蒙实战开发】鸿蒙OS模块化开发实战：独立路由与解耦策略

最新推荐文章于 2025-07-08 06:30:00 发布

原创最新推荐文章于 2025-07-08 06:30:00 发布 · 570 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#harmonyos #华为 #ui #鸿蒙 #android

安卓同时被 3 个专栏收录

200 篇文章

订阅专栏

鸿蒙

200 篇文章

订阅专栏

前端

200 篇文章

订阅专栏

前言

在现代软件开发中，模块化设计是提高项目可维护性和可扩展性的关键。鸿蒙OS以其先进的架构设计，为开发者提供了强大的模块化开发工具。本文将深入探讨如何在鸿蒙OS中实现模块的独立路由配置，以降低模块间的耦合度，实现单模块的独立运行和开发。

一、架构设计概述

一个清晰的架构设计是模块化开发的基石。以下是我推荐的架构设计模式：

- baselibrary （底层公共框架库）
  - 包含项目中所有共用的基础功能和工具类。
- commons （业务公用框架库）
  - uicomponents （公用页面，组件库）
    - 存放所有可复用的UI组件和页面模板。
- features
  - collection （收藏页面组件）
  - message （消息页面组件）
  - 每个特性模块包含其特定的业务逻辑和UI实现。
- products
  - default （产品模块）
    - 默认的产品模块，包含应用的主要功能和入口。

二、路由配置详解

基础路由配置
在产品模块中，我们首先需要定义基础路由，这些路由通常包括应用的启动页、首页和登录页面等。
基础路由配置代码示例：

// 定义路由名称常量
export enum RouteName {
  SplashPage = 'SplashPage',
  MainPage = 'MainPage',
  OtherLogin = 'OtherLogin',
  OtherTest = 'OtherTest'
}

// 路由配置函数
@Builder
export function routeConfig(name: string, param?: object) {
  switch (name) {
    case RouteName.SplashPage:
      return SplashPage();
    case RouteName.MainPage:
      return MainPage();
    case RouteName.OtherTest:
      return TestPage();
    case RouteName.OtherLogin:
      return OtherLogin();
    default:
      return NullPage();
  }
}

应用入口配置
在应用的入口文件中，我们将配置路由并初始化导航。
应用入口配置代码示例：

@Entry
@Component
struct Index {
  // 路由栈
  @Provide('NavPathStack') pageInfos = new NavPathStack();

  aboutToAppear() {
    // 初始化路由
    LibNavigator.init(this.pageInfos, routeConfig);
  }

  build() {
    Navigation(this.pageInfos) {
      MainPage();
    }
    .navDestination(routeConfig);
  }
}

三、模块化系统路由配置

模块路由页面编写
对于每个模块，我们需要编写路由页面代码，以实现模块内的页面导航。
模块路由页面代码示例：

import { CommentComp } from '../pages/comment/CommentComp';

export enum MessageRouteName {
  Comment = "Comment"
}

@Builder
export function messageRouter(name: string, param?: object) {
  if (name === MessageRouteName.Comment) {
    return CommentComp();
  }
}

系统路由表配置
在系统的配置文件中，我们将配置模块的路由表，以实现模块的独立路由运行。
系统路由表配置代码示例：

{
  "routerMap": [
    {
      "name": "Comment",
      "pageSourceFile": "src/main/ets/router/MessageRouter.ets",
      "buildFunction": "messageRouter",
      "data": {
        "description": "Comment 页面"
      }
    }
  ]
}

module.json5配置示例：

{
  "module": {
    "name": "message",
    "type": "har",
    "deviceTypes": [
      "default",
      "tablet",
      "2in1"
    ],
    "routerMap": "$profile:route_map"
  }
}