鸿蒙Next启动module中的page 原创

当我们抽离一个功能作为一个module供其他模块调用，或者导入第三方的module时，可能需要在应用entry模块中打开module中的page，本文介绍一下如何新建一个module，及entry打开module中的页面的3中方法。

新建module

选择Static Library点击下一步，设置module name 完成即可创建完成

引用module

在entry模块下的oh-package.json5文件中添加module的引用

 "dependencies": {
    'library_common': 'file:../library_common'
  }

在library_common中创建3个页面
1.使用router启动的page，entry配置的routeName用于通过pushNamedRoute启动该页面

@Entry({routeName:'modulePage'})
@Component
struct RouterPage {
  message: string = 'RouterPage';
  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize($r('app.float.page_text_font_size'))
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
    }
    .height('100%')
  }
}

2.使用系统路由表启动的page

@Builder
export function NavigationPageBuilder() {
  NavigationPage()
}
@Entry
@ComponentV2
struct NavigationPage{
  message: string = 'NavigationPage';
  build() {
    NavDestination(){
      Row() {
        Column() {
          Text(this.message)
            .fontSize($r('app.float.page_text_font_size'))
            .fontWeight(FontWeight.Bold)
        }
        .width('100%')
      }
      .height('100%')
    }
  }
}

使用navigation需要在module模块的module.json5配置路由，和entey中使用路由是一样的

{
  "module": {
    "name": "library_common",
    "type": "har",
    "routerMap":'$profile:route_map',
    "deviceTypes": [
      "phone",
      "tablet"
    ],

  }
}
//route_map.json
{
  "routerMap": [
    {
      "name": "module_navigation_page",
      "pageSourceFile": "src/main/ets/pages/NavigationPage.ets",
      "buildFunction": "NavigationPageBuilder"
    }
  ]
}

3.使用动态路由启动page

@Entry
@ComponentV2
export struct DynamicNavigationPage{
  message: string = 'DynamicNavigationPage';
  build() {
    NavDestination(){
      Row() {
        Column() {
          Text(this.message)
            .fontSize($r('app.float.page_text_font_size'))
            .fontWeight(FontWeight.Bold)
        }
        .width('100%')
      }
      .height('100%')
    }
  }
}

不需要配置路由信息，需要在Index中配置导出，供entry引入

export {DynamicNavigationPage} from './src/main/ets/pages/DynamicNavigationPage'

entry中使用

1.使用router启动Module中的page，首先使用import导入要启动page,然后使用router启动

import 'library_common/src/main/ets/pages/RouterPage'
Button('使用router启动Module中的page')
          .onClick(() => {
           router.pushNamedRoute({name:'modulePage'})
          })

2.使用系统路由表启动Module中的page

 Button('使用系统路由表启动Module中的page')
          .onClick(() => {
            //2种方法都可以
            // this.pageInfos.pushPathByName('module_navigation_page',null );
            this.pageInfos.pushPath({name:'module_navigation_page',param:null})
          })

3.使用自定义路由表启动Module中的page

//导入page
import { DynamicNavigationPage } from 'library_common'

//自定义路由
 @Builder
  PagesMap(name: string) {
    if (name == 'DynamicNavigationPage') {
      DynamicNavigationPage()
    }
  }
// 设置navDestination
Navigation(this.pageInfos){
...
}
.navDestination(this.PagesMap)
//调用
 Button('使用自定义路由表启动Module中的page')
          .onClick(() => {
            this.pageInfos.pushPathByName('DynamicNavigationPage',null );
          })

通过以上3种方式即可实现打开module种的page页面，可以根据实际项目中的页面架构选择合适的方式