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

@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 参数如下 

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参数如下

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