HarmonyOS 开发实践——模块化架构组件 （使用系统路由表+注解+hvigor插件 自动配置项目模块化）

往期推文看点

• 鸿蒙（HarmonyOS）北向开发知识点记录~
• 鸿蒙（OpenHarmony）南向开发保姆级知识点汇总~
• 鸿蒙应用开发与鸿蒙系统开发哪个更有前景？
• 嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~
• 对于大前端开发来说，转鸿蒙开发究竟是福还是祸？
• 鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？
• 记录一场鸿蒙开发岗位面试经历~
• 持续更新中……

@satis/oh-router简介

@satis/oh-router 与 hvigor插件 @satis-sun/modularity-plugin 配合使用，无需手动配置系统路由表，
使用注解的方式即可完成系统路由表的配置

1. 下载安装

ohpm install @satis/oh-router

推荐使用 @satis-sun/modularity-plugin 插件，该插件会自动配置模块依赖 @satis/oh-router、@satis/common_router

无需手动安装

• 配置 工程目录下的 hvigor/hvigor-config.json5

{
      "modelVersion": "5.0.0",
      "dependencies": {
        "@satis-sun/modularity-plugin": "^1.0.4"
      },
      ...
    }

• 配置工程目录下 hvigorfile.ts

import { appTasks } from '@ohos/hvigor-ohos-plugin';
import { ModularityPlugin,ModularityConfig } from '@satis-sun/modularity-plugin'

export const config:ModularityConfig = {
        scanModules:[
          {
            name:"module1",
          },
        ]
    }

export default {
    system: appTasks, 
    plugins:[ModularityPlugin(config)] 
}

其中 ModularityConfig 参数如下

scanModules	ModuleConfig[]	需要自动配置路由的模块（不设置默认配置全部模块 不建议）
ModuleConfig:name	模块名称（文件夹名）	必填
ModuleConfig:scanPackages	指定扫描包内的特定目录结合	如[“pages”] 目录（非必填）
ModuleConfig:ignorePackages	指定忽略扫描的目录集合	如[“viewModle”] 目录（非必填）

2. 页面上添加 @Router注解，

• 路由目标页面

  import { Router } from '@satis/oh-router'

    @Router({
        name:"/module1/second"
    })
    @Component
    export struct Second{
      build() {
        NavDestination(){
          Text("second")
        }.title("module1 second")
      }
    }

其中 Router(routerConfig:RouterConfig) RouterConfig参数如下

name	string	路由名称规定需要以"/" 开头，（推荐使用 “/模块/业务/功能” 这种命名方式）
interceptionTag	?string	路由拦截标识，自定义标识
interceptionTip	?string	路由拦截提示语言

3. 编译

• @satis-sun/modularity-plugin 会自动创建common_router模块，用来存储 路由name的 枚举类

• 自动配置依赖

"dependencies": {
        "@satis/oh-router": "^1.0.0",
        "@satis/common-router": "file:../common_router"
      },

• scanModules 所有模块下的 module.json5自动添加配置

 "routerMap": "$profile:router_map"

• 自动创建 src/main/resources/bash/profile/router_map.json

{
      "routerMap": [
        {
          "name": "/module1/second",
          "pageSourceFile": "src/main/ets/generate/module1_second.ets",
          "buildFunction": "module1_secondBuilder"
        }
      ]
    }

• 自动生成 Builder

  import { Second } from 'ets/pages/Second'
    @Builder
    function module1_secondBuilder() {
      Second()
    }

• 在common_router 模块自动生成路由枚举常量声明

 export enum RouterEnum{
     /**
     *
     *  路由地址: /module2/main
     *  pageSourceFile: src/main/ets/_generate/module1_second.ets
     *  buildFunction: module1_secondBuilder
     *  拦截标识 interceptionTag:
     *  拦截提示 interceptionTip:
     */
     MODULE1_SECOND="/module1/second",
    }

• 自动替换 路由名称为 枚举常量

 import { Router } from '@satis/oh-router'
    import { RouterEnum } from'@satis/common-router';

    @Router({
        name:RouterEnum.MODULE1_SECOND
    })
    @Component
    export struct Second{
      build() {
        NavDestination(){
          Text("second")
        }.title("module1 second")
      }
    }

4. 路由初始化在应用如空 onWindowStageCreate 中初始化

onWindowStageCreate(windowStage: window.WindowStage): void {
    // Main window is created, set main page for this ability
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');
    const  pageStack = new NavPathStack()

    OHRouter.init({
      pageStack:pageStack,
      needInterceptMap:interceptMap()
    })

    // 添加拦截器
    OHRouter.setInterceptForTag("login",{
      onIntercept(next:()=>void,tip?:string){
         let login = false
         //TODO goto login
        //登陆完成后 继续之前的跳转
        if(login){
          next()
        }else{
          console.log(tip)
        }
      }
    })
    windowStage.loadContent('pages/Index', (err) => {
      if (err.code) {
        hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
        return;
      }
      hilog.info(0x0000, 'testTag', 'Succeeded in loading the content.');
    });
  }

5. 通过OhRouter即可跳转（支持跨模块跳转）

@Entry
@Component
struct  Index {
  @State message: string = 'Hello World';
  build() {
     Navigation(OhRouter.pageStack){
     }.hideNavBar(true)
     .onAppear(()=>{
        OhRouter.pushPathByName(RouterEnum.MODULE2_SECOND,null,true)
     })
    .width('100%')
    .height('100%')
    .titleMode(NavigationTitleMode.Mini)
  }
}