
回复
本文原创发布在华为开发者社区。
本示例介绍Navigation系统路由表+动态import+Tabs 搭建的应用导航框架,通过系统路由表解决分包多团队开发耦合问题,彼此仅关注本团队负责Har包开发内容,将页面注册到系统路由表中,解决PageMap会导致代码产生大量的If/else分支问题,介绍了如何跳转同HAP包页面,har包页面跳转。
通过动态Import解决页面动态渲染的诉求,常用场景:首页多种样式,通过主题字段确定样式的加载。
TabBar作为底部导航栏,屏蔽Navigation导航栏。
点击底部TabBar可以切换展示页面,我的页面介绍了动态Import的使用,首页介绍了路由跳转的使用,包含跳转、pop等用法。
"buildOption": {
"arkOptions": {
"runtimeOnly": {
"sources": [
"./src/main/ets/pages/TabStyleA.ets",
"./src/main/ets/pages/TabStyleB.ets"
]
}
}
......
}
loadTabBar() {
import('./' + this.styleName).then((result: ESObject) => {
this.globalBuilder = result.getBuilder();
hilog.info(0xFF00, 'info', '%{public}s', 'load success');
}).catch((err: Error) => {
hilog.error(0xFFFF, "error", "%{public}s", "not found")
this.globalBuilder = wrapBuilder(defaultBuilder);
});
}
"routerMap": "$profile:route_map"
{
"routerMap": [
{
"name": "pageText",
"pageSourceFile": "src/main/ets/pages/TextExample.ets",
"buildFunction": "pageTextBuilder"
}
]
}
{
@Builder
function pageTextBuilder() {
TextExample()
}
private stack: NavPathStack = new NavPathStack();
......
this.stack.pushPath({
name: 'pageText', param: 'tabStyleA', onPop: (popInfo) => {
hilog.info(0xFF00, 'info', '%{public}s', '返回页面成功 ' + JSON.stringify(popInfo.result));
}
})