HarmonyOS鸿蒙Next实现应用导航框架示例代码

HarmonyOS鸿蒙Next实现应用导航框架示例代码

介绍

  • 本示例介绍Navigation系统路由表+动态import+Tabs 搭建的应用导航框架，通过系统路由表解决分包多团队开发耦合问题，彼此仅关注本团队负责Har包开发内容，将页面注册到系统路由表中，解决PageMap会导致代码产生大量的If/else分支问题，介绍了如何跳转同HAP包页面，har包页面跳转。
  • 通过动态Import解决页面动态渲染的诉求，常用场景：首页多种样式，通过主题字段确定样式的加载。
  • TabBar作为底部导航栏，屏蔽Navigation导航栏。

实现应用导航框架源码链接

效果预览

图片名称

使用说明

点击底部TabBar可以切换展示页面，我的页面介绍了动态Import的使用，首页介绍了路由跳转的使用，包含跳转、pop等用法。

实现思路

  • 动态import需要在build-profile.json5文中完成配置
"buildOption": {
  "arkOptions": {
    "runtimeOnly": {
      "sources": [
        "./src/main/ets/pages/TabStyleA.ets",
        "./src/main/ets/pages/TabStyleB.ets"
      ]
    }
  }
  ......
}
  • 使用import和相对路径进行动态加载
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);
  });
}
  • 页面跳转目标模块module.json5文件中声明路由表
"routerMap": "$profile:route_map"
  • 并在src/main/resources/base/profile/路径下完成路由表route_map.json配置
{
  "routerMap": [
    {
      "name": "pageText",
      "pageSourceFile": "src/main/ets/pages/TextExample.ets",
      "buildFunction": "pageTextBuilder"
    }
  ]
}
  • 目标页面声明Builder函数
@Builder
function pageTextBuilder() {
  TextExample()
}
  • 定义NavPathStack进行跳转操
private stack: NavPathStack = new NavPathStack();
......

this.stack.pushPath({
  name: 'pageText', param: 'tabStyleA', onPop: (popInfo) => {
    hilog.info(0xFF00, 'info', '%{public}s', '返回页面成功 ' + JSON.stringify(popInfo.result));
  }
})

更多关于HarmonyOS鸿蒙Next实现应用导航框架示例代码的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于HarmonyOS鸿蒙Next实现应用导航框架示例代码的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


HarmonyOS（鸿蒙OS）Next中的应用导航框架主要通过PageAbility和AbilitySlice来实现。以下是一个简单的导航框架示例代码，展示了如何在两个页面之间进行导航。

import { Ability, AbilitySlice, Intent } from '@ohos.application.Ability';

// 定义第一个页面
class FirstSlice extends AbilitySlice {
    onStart() {
        super.onStart();
        this.setUIContent($r('app.layout.first_page')); // 加载第一个页面的布局

        // 添加按钮点击事件，跳转到第二个页面
        let button = this.findComponentById($r('app.id.button'));
        button.on('click', () => {
            let intent = new Intent();
            intent.setOperation({
                bundleName: 'com.example.myapp',
                abilityName: 'SecondSlice'
            });
            this.startAbility(intent);
        });
    }
}

// 定义第二个页面
class SecondSlice extends AbilitySlice {
    onStart() {
        super.onStart();
        this.setUIContent($r('app.layout.second_page')); // 加载第二个页面的布局
    }
}

// 定义Ability
export default class MainAbility extends Ability {
    onStart() {
        super.onStart();
        this.setMainRoute(FirstSlice); // 设置第一个页面为入口
    }
}

在这个示例中，FirstSlice和SecondSlice分别代表两个不同的页面。FirstSlice中设置了一个按钮，点击按钮后通过Intent跳转到SecondSlice。MainAbility是应用的入口，设置了FirstSlice为应用的初始页面。

通过这种方式，开发者可以在HarmonyOS Next中实现应用内页面的导航。

回到顶部