轻松上手 -Navigation 路由 H5

2025-08-15
湖北
本文字数：1258 字
阅读完需：约 4 分钟

踏入鸿蒙世界的敲门砖，标志着您在技术征途上的全新起点，提升就业竞争力，获得行业认可，点亮职业成长先机，快人一步抢占未来应用开发赛道！https://developer.huawei.com/consumer/cn/training/dev-cert-detail/101666948302721398?ha_source=hmosclass-bokeyuan&ha_sourceId=89000444

介绍

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

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

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

效果预览

知识点

1. Navigation 组件

2. 使用 Web 组件加载页面

3. 前端页面调用应用侧函数

4. Emitter 线程间通信

工程目录

具体实现

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

1. ParamClass 实体类

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

2. HTML 文件

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