目录

  • 介绍
  • 效果预览
  • 知识点
  • 1. Navigation组件
  • 2. 使用Web组件加载页面
  • 3. 前端页面调用应用侧函数
  • 4. Emitter线程间通信
  • 工程目录
  • 具体实现
  • 1. ParamClass实体类
  • 2. HTML文件
  • 3. 首页
  • 4. 普通ArkTS页面
  • 5. Web组件H5页面
  • 6. 详情页面
  • 总结
  • 约束与限制

介绍

​ HarmonyOS的Navigation组件是ArkUI中用于管理页面路由的容器组件，它支持模块内和跨模块的路由切换，提供自然流畅的转场体验及多种标题栏样式，适用于一次开发、多端部署的场景。通过Navigation组件，开发者可以轻松定义页面路径并实现页面间的跳转，同时在不同设备上自动适配显示大小，提升用户体验。

​ 对于Web组件H5页面的显示，HarmonyOS提供了与Web技术融合的能力，使得H5页面可以在鸿蒙设备上流畅运行。当用户点击H5页面中的特定元素时，可以通过集成的小程序路由或JavaScript桥接技术，实现向鸿蒙应用内路由页面的跳转。

​ HarmonyOS的Navigation组件与Web组件H5页面显示技术相结合，不仅丰富了应用的页面交互方式，还提升了应用间的互操作性。用户可以在H5页面中享受丰富的网页内容，并通过点击跳转到鸿蒙应用内的路由页面，实现无缝的跨平台体验。

效果预览

知识点

1. Navigation组件
2. 使用Web组件加载页面
3. 前端页面调用应用侧函数
4. Emitter线程间通信

工程目录

├──entry/src/main/ets                         // 代码区
│  ├──entryability
│  │  └──EntryAbility.ets 
│  ├──model
│  │  └──ParamClass.ets                       // 参数Class
│  ├──pages
│  │  └──Index.ets                            // 首页
│  └──view
│     ├──FromArkTSDetailPage.ets              // ArkTS详情页
│     └──FromArkTSOnePage.ets                 // ArkTS简单页
│     └──FromWebHtmlPage.ets                  // Web组件H5页面
└──entry/src/main/resources                   // 应用资源目录
      └──rawfile                              
         └──index.html                        // 本地H5页面

具体实现

​ 首页显示页面间跳转流程和一个跳转到第一个ArkTS页面按钮，点击首页跳转按钮跳转到普通ArkTS页面，在普通ArkTS页面点击跳转到有Web组件的H5页面，在Web组件H5页面，点击H5页面里的图片，跳转到详情页面，详情页面显示从H5页面传出的参数，并显示传出参数的图片，如果点击Web组件H5页面按钮，跳转到详情页，由于没有点击H5页面，参数为默认图片值。

1. ParamClass实体类

ParamClass包含img属性图片名称，size属性图片大小，无参构造函数，callArkTS提供给H5调用的函数。

import { emitter } from '@kit.BasicServicesKit';

export class ParamClass {
  // 图片名称
  img?: string;
  // 图片大小
  size?: number;
  // 无参构造函数
  constructor() {
  }
  // 提供H5调用函数
  callArkTS(params: ESObject) {
    // emitter线程通信参数
    let eventData: emitter.EventData = {
      data: params
    };
    // 发送事件
    emitter.emit({eventId: 11}, eventData)
  }
}
2. HTML文件

​ 本地html文件，主要是显示三张图片，点击图片调用函数，函数里调用应用侧函数，paramClass是在Web组件里javaScriptProxy定义name, paramClass.callArkTS这里的callArkTS是javaScriptProxy里methodList定义的。

<!DOCTYPE html>
<html>
<body>
<img src="seven_one.jpg" width="512", height="300" onclick="callArkTS('seven_one.jpg')">
<img src="seven_two.jpg" width="512", height="300" onclick="callArkTS('seven_two.jpg')">
<img src="seven_three.jpg" width="512", height="300" onclick="callArkTS('seven_three.jpg')">
<script>
    function callArkTS(imgId) {
        let obj = {
            'img': imgId,
            'size': 3
        }
        paramClass.callArkTS(obj);
    }
</script>
</body>
</html>
3. 首页

​ 首页使用了Navigation组件，初始化路由栈，操作流程说明和跳转按钮。

@Entry
@Component
struct Index {
  // 页面路由栈
  @Provide('navPathStack') navPathStack: NavPathStack = new NavPathStack();
  // 跳转页面入口
  @Builder
  nimblePageRouter(name: string, param?: object) {
    if (name === 'fromArkTSOnePage') {
      FromArkTSOnePage()
    }else if (name === 'fromWebHtmlPage') {
      FromWebHtmlPage()
    }else if (name === 'fromArkTSDetailPage') {
      FromArkTSDetailPage()
    }
  }
  build() {
    Navigation(this.navPathStack) {
        页面布局参看下面......
    }
    .hideTitleBar(false)
    .title('首页')
    .navDestination(this.nimblePageRouter)
  }
}

  Column({ space: 20 }) {
    Text('1. 点击按钮跳转到ArkTS第一页面')
      .fontSize(18)
      .fontWeight(600)
      .fontColor(Color.Red)
      .width('100%')
    Text('2. 点击按钮跳转到Web组件H5页面')
      .fontSize(14)
      .width('100%')
    Text('3. 点击按钮跳转到ArkTS详情页面')
      .fontSize(14)
      .width('100%')
    Text('4. 点击按钮跳转到首页页面')
      .fontSize(14)
      .width('100%')

    Button('跳转ArkTS第一页面')
      .width('80%')
      .height(40)
      .onClick(() => {
        // 跳转页面
        let pathInfo : NavPathInfo = new NavPathInfo('fromArkTSOnePage', null)
        this.navPathStack.pushDestination(pathInfo, true);
      })
  }
  .width('100%')
  .height('100%')
  .padding(20)
4. 普通ArkTS页面

​ 此页面主要使用NavDestination显示页面内容。

@Component
export struct FromArkTSOnePage {
  @Consume('navPathStack') navPathStack: NavPathStack;
  build() {
    NavDestination() {
      Column({ space: 20 }) {
        Text('1. 点击按钮跳转到ArkTS第一页面')
          .fontSize(14)
          .width('100%')
        Text('2. 点击按钮跳转到Web组件H5页面')
          .fontSize(18)
          .fontWeight(600)
          .fontColor(Color.Red)
          .width('100%')
        Text('3. 点击按钮跳转到ArkTS详情页面')
          .fontSize(14)
          .width('100%')
        Text('4. 点击按钮跳转到首页页面')
          .fontSize(14)
          .width('100%')
        Button('跳到H5页面')
          .width('80%')
          .height(40)
          .onClick(() => {
            let pathInfo : NavPathInfo = new NavPathInfo('fromWebHtmlPage', null)
            this.navPathStack.pushDestination(pathInfo, true);
          })
      }
      .width('100%')
      .height('100%')
      .padding(20)
    }
    .title('ArkTS第一个页面')
  }
}
5. Web组件H5页面

​ 此页面主要使用Web组件显示本地H5页面，并且订阅了eventId为11的事件。

@Component
export struct FromWebHtmlPage {
  @Consume('navPathStack') navPathStack: NavPathStack;
  webviewController: webview.WebviewController = new webview.WebviewController();
  // 声明需要注册的对象
  private paramClass: ParamClass = new ParamClass();
  aboutToAppear(): void {
    // 订阅eventId为11的事件
    emitter.on({eventId: 11}, (result) => {
      console.info('xxx ArkTS Hello World!'+JSON.stringify(result.data));
      let pathInfo : NavPathInfo = new NavPathInfo('fromArkTSDetailPage', result.data)
      this.navPathStack.pushDestination(pathInfo, true);
    })
  }

  build() {
    NavDestination() {
      Column({ space: 20 }) {
        ... 部分代码下面
        // Web组件加载本地index.html页面
        Web({ src: $rawfile('index.html'), controller: this.webviewController})
          // 将对象注入到web端
          .javaScriptProxy({
            object: this.paramClass,
            name: "paramClass",
            methodList: ["callArkTS"],
            controller: this.webviewController
          })
          .width('100%')
          .backgroundColor('#CCC')
      }
      .width('100%')
      .height('100%')
      .padding(20)
    }
    .title('Web组件H5页面')
  }
}

        Text('1. 点击按钮跳转到ArkTS第一页面')
          .fontSize(14)
          .width('100%')
        Text('2. 点击按钮跳转到Web组件H5页面')
          .fontSize(14)
          .width('100%')
        Text('3. 点击按钮跳转到ArkTS详情页面')
          .fontSize(18)
          .fontWeight(600)
          .fontColor(Color.Red)
          .width('100%')
        Text('4. 点击按钮跳转到首页页面')
          .fontSize(14)
          .width('100%')

        Button('跳到详情页面')
          .width('80%')
          .height(40)
          .onClick(() => {
            let pathInfo : NavPathInfo = new NavPathInfo('fromArkTSDetailPage', null)
            this.navPathStack.pushDestination(pathInfo, true);
          })
        Text('以下图片来自H5页面')
          .fontSize(14)
          .fontColor(Color.Orange)
          .width('100%')
6. 详情页面

​ 此页面主要在NavDestination调用onReady回调函数接收参数，然后展示传过来的图片。

@Component
export struct FromArkTSDetailPage {
  @Consume('navPathStack') navPathStack: NavPathStack;
  @State imgId: string = 'seven_blank.jpg'
  build() {
    NavDestination() {
      Column({ space: 20 }) {
        ...
        Image($rawfile(this.imgId))
          .width('100%')
      }
      .width('100%')
      .height('100%')
      .padding(20)
    }
    .title('ArkTS详情页面')
    .onReady((cxt) => {
      if (cxt.pathInfo.param) {
        let obj = cxt.pathInfo.param as ParamClass;
        if (obj.img) {
          console.info('xx', `获取图片路径: ${obj.img}`)
          this.imgId = obj.img
        }
      }
    })
  }
}

总结

​ 通过此案例，可以学习到Navigation组件路由导航使用，H5前端页面调用应用侧函数，还有就是Emitter主要提供线程间发送和处理事件的能力，包括对持续订阅事件或单次订阅事件的处理、取消订阅事件、发送事件到事件队列等。

约束与限制

1.本示例仅支持标准系统上运行，支持设备：华为手机。

2.HarmonyOS系统：HarmonyOS NEXT Developer Beta1及以上。

3.DevEco Studio版本：DevEco Studio NEXT Developer Beta1及以上。

4.HarmonyOS SDK版本：HarmonyOS NEXT Developer Beta1 SDK及以上。

# harmonyos
Logo
HarmonyOS开发者社区

讨论HarmonyOS开发技术，专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐

鸿蒙创新能力助力医疗健康行业体验变革

在当今数字化医疗的时代浪潮中，HarmonyOS以其卓越的创新能力，为医疗健康行业开辟了多项创新应用场景，展现出巨大的潜力和价值。今天与大家分享鸿蒙系统在医疗领域部分创新应用场景，同时也期待能收获大家的反馈，共同助力鸿蒙系统的持续优化与改进。 一、检前 痛点：健康检查预约页面入口深步骤多用户操作麻烦，预约后容易遗忘检查时间，临检前容易忽略检前注意事项，例如，检前N小时不能进食、不能喝水等。以上问题

avatar HarmonyOS开发者社区

集成这项鸿蒙创新能力 政务应用交互效率提升60%

提高群众获得感和提升行政效能一直是政务服务行业关注的焦点，今天与大家分享几个鸿蒙创新能力在政务领域的创新应用场景，期待能收获大家的反馈，共同助力HarmonyOS的持续优化与改进。 一、服务卡片 针对政务应用菜单繁琐，高频功能入口深问题，基于服务卡片能力实现功能直达，让常用高频功能一键加桌。如将公积金查询服务加桌，随时查看账户信息；将电子证照服务加桌，随时快速亮证展示电子证照等。用户根据自身需求灵

avatar HarmonyOS开发者社区

鸿蒙创新能力让金融应用更安全更便捷

在当今数字化技术快速发展的时代，金融行业对于业务的数字化创新需求日益迫切。HarmonyOS以其独特的创新能力，为金融行业带来了全新的应用场景和解决方案，正在重塑金融服务的未来。 场景一：可信应用服务阻击黑灰产诈骗 助力金融应用更安全 虚假地理位置和虚假人脸是黑产诈骗逃避风控的重要手段，会造成用户损失，银行信誉受损。虚假地理位置是通过Fake Location篡改LocationManagerSe

avatar HarmonyOS开发者社区