轻松上手-Navigation 路由 H5

踏入鸿蒙世界的敲门砖，标志着您在技术征途上的全新起点，提升就业竞争力，获得行业认可，点亮职业成长先机，快人一步抢占未来应用开发赛道！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定义的。

 3. 首页

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

 4. 普通ArkTS页面

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

 5. Web组件H5页面

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

6. 详情页面

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

总结

 通过此案例，可以学习到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及以上。

（转载自51CTO，作者：狼哥Army）