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

合集 - 鸿蒙(13)

1.鸿蒙开发实战：深度解析网络管理技巧与实战应用2024-12-22 2.鸿蒙开发实战：灵活定制编译选项，打造高效应用2024-12-22 3.鸿蒙开发实战：轻松配置多环境目录，实现高效应用部署2024-12-22 4.鸿蒙开发实战：揭秘页面与项目生命周期，实现精准监控2024-12-22 5.鸿蒙实战开发：网络层的艺术——优雅封装与搭建指南（上）2024-12-22 6.鸿蒙实战开发：网络层的艺术——优雅封装与搭建指南（中）2024-12-22 7.鸿蒙实战开发：网络层的艺术——优雅封装与搭建指南（下）2024-12-22 8.鸿蒙OS创新实践：动态声控话筒开发指南2024-12-27 9.鸿蒙OS高级技巧：打造个性化动态Swiper效果2024-12-27

10.鸿蒙OS模块化开发实战：独立路由与解耦策略2024-12-27

11.鸿蒙OS开发秘籍：打造优雅的登录状态管理系统2024-12-27 12.HarmonyOS NEXT开发实战：打造高效上拉刷新与下拉加载组件（一）空页面的设计与实现2024-12-27 13.HarmonyOS NEXT开发实战：实现高效下拉刷新与上拉加载组件（二）刷新核心逻辑与空页面集成2024-12-27

前言

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

一、架构设计概述

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

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

二、路由配置详解

1. 基础路由配置

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

基础路由配置代码示例：

// 定义路由名称常量
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();
  }
}

2. 应用入口配置

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

应用入口配置代码示例：

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

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

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

三、模块化系统路由配置

1. 模块路由页面编写

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

模块路由页面代码示例：

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();
  }
}

2. 系统路由表配置

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

系统路由表配置代码示例：

{
  "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"
  }
}