踏入鸿蒙世界的敲门砖，标志着您在技术征途上的全新起点，提升就业竞争力，获得行业认可，点亮职业成长先机，快人一步抢占未来应用开发赛道！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.png]()
![图片 2.png]()
知识点
1. Navigation组件
2. 使用Web组件加载页面
3. 前端页面调用应用侧函数
4. Emitter线程间通信
工程目录
![图片 3.png]()
具体实现
首页显示页面间跳转流程和一个跳转到第一个ArkTS页面按钮，点击首页跳转按钮跳转到普通ArkTS页面，在普通ArkTS页面点击跳转到有Web组件的H5页面，在Web组件H5页面，点击H5页面里的图片，跳转到详情页面，详情页面显示从H5页面传出的参数，并显示传出参数的图片，如果点击Web组件H5页面按钮，跳转到详情页，由于没有点击H5页面，参数为默认图片值。
1. ParamClass实体类
ParamClass包含img属性图片名称，size属性图片大小，无参构造函数，callArkTS提供给H5调用的函数。
![图片 4.png]()
2. HTML文件
本地html文件，主要是显示三张图片，点击图片调用函数，函数里调用应用侧函数，paramClass是在Web组件里javaScriptProxy定义name, paramClass.callArkTS这里的callArkTS是javaScriptProxy里methodList定义的。
![图片 5.png]()
3. 首页
首页使用了Navigation组件，初始化路由栈，操作流程说明和跳转按钮。
![图片 6.png]()
![图片 7.png]()
4. 普通ArkTS页面
此页面主要使用NavDestination显示页面内容。
![图片 8.png]()
5. Web组件H5页面
此页面主要使用Web组件显示本地H5页面，并且订阅了eventId为11的事件。
![图片 9.png]()
6. 详情页面
此页面主要在NavDestination调用onReady回调函数接收参数，然后展示传过来的图片。
![图片 10.png]()
总结
通过此案例，可以学习到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）
