HarmonyOS鸿蒙Next中如何快速将原有的5+项目在原生鸿蒙实现。

HarmonyOS鸿蒙Next中如何快速将原有的5+项目在原生鸿蒙实现。 手头有三个Hbuilder写的html5Plus的应用，目前打算用鸿蒙的web组件内嵌该项目，请问原本项目内部的页面跳转（plus.webview.open）以及html页面之间的通讯传参我该如何修改呢？

6 回复

arkts的web和h5交互可以使用Web组件提供的JavaScriptProxy实现原生与H5交互

可以参考此文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/web-use-frontend-page-js

相关示例：实现ArkTS与H5的交互功能-HarmonyOS NEXT-Codelabs-华为开发者联盟

主要介绍ArkTS侧与H5侧如何交互，通过JSBridge的相关接口实现了话费充值的场景案例，展示了ArkTS侧如何调用H5侧的方法、H5侧如何调用ArkTS侧的方法，帮助开发者掌握ArkTS侧与H5侧的交互

【背景知识】

  • 前端页面调用应用侧函数：开发者使用Web组件将应用侧代码注册到前端页面中，注册完成之后，前端页面中使用注册的对象名称就可以调用应用侧的函数，实现在前端页面中调用应用侧方法。

更多关于HarmonyOS鸿蒙Next中如何快速将原有的5+项目在原生鸿蒙实现。的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


貌似您没有理解我的意思。我的意思是，不单单是原生与单一的H5界面交互。H5的界面存在着一些逻辑，比如点击跳转，需要跳转到别的H5页面。

有要学HarmonyOS AI的同学吗，联系我：https://www.itying.com/goods-1206.html

uni-app官方基于性能瓶颈和技术演进方向（UTS插件）考虑，未规划对HarmonyOS平台的plus接口适配支持。

如何适配得看下用了哪些plus方法，比如plus.webview.open。

  1. 如果只是单个uni-app应用内，那一般就是封装一个路由页面其中直接使用<web-view>(https://uniapp.dcloud.net.cn/component/web-view.html)组件加载，点击跳转传递参数等需要通过uni-app的条件编译写HarmonyOS的相关适配代码如uni.postMessage和uni.createWebviewContext的evalJS通信自行处理。
  2. 如果是像您说的考虑用Web组件加载三个uni-app html5+项目，跳转传参也是和上面说的一样使用Web组件提供的JavaScriptProxy实现交互，通过Web组件的controller.loadUrl重新加载。因为是Web组件加载，所以加载的是H5，uni-app的条件编译命中的是H5，如果需要判断仅在HarmonyOS中执行还需要判断User-Agent。

您看还用到了哪些其他的plus方法？

在HarmonyOS Next中，5+项目需通过ArkTS重构。使用DevEco Studio创建原生鸿蒙项目，将原有HTML5业务逻辑转换为ArkUI组件。利用鸿蒙API替换原5+接口，如网络、存储等。通过Stage模型管理应用生命周期，确保兼容性。

在HarmonyOS Next中，可以通过Web组件加载原有5+项目的HTML资源，但需要调整页面跳转和通信机制：

  1. 页面跳转适配：

    • 替换plus.webview.open为Web组件的loadUrl方法
    • 在ArkTS中通过webController.loadUrl(url)实现页面跳转
    • 建议使用路由参数方式传递页面路径

  2. 页面通信方案：

    • 使用Web组件的onMessage事件监听HTML发起的消息
    • 通过runJavaScript方法执行JS代码实现ArkTS到HTML的通信
    • 传参建议采用JSON格式序列化数据

  3. 具体实现示例：

// 注册消息监听
webController.onMessage((event: string) => {
  let data = JSON.parse(event)
  // 处理来自HTML的消息
})

// 执行JS代码向HTML传递数据
webController.runJavaScript(`receiveData(${JSON.stringify(data)})`)

需要在HTML侧对应调整：

  • 将原有的plus.webview调用改为window.chrome.webview.postMessage
  • 通过监听特定事件接收来自ArkTS的数据

这种方式可以保持原有业务逻辑基本不变，只需修改通信接口即可实现迁移。

回到顶部