HarmonyOS鸿蒙Next中uniapp和ArkTS混合开发

HarmonyOS鸿蒙Next中uniapp和ArkTS混合开发 如何把uniapp的代码和ArkTS工程合并在一起，实现混合开发？

2 回复

HarmonyOS Next中，UniApp与ArkTS混合开发支持通过Native API插件桥接。UniApp使用Vue/JS开发界面，通过ArkTS编写的Native模块调用系统能力。需在UniApp项目中集成鸿蒙原生模块，使用Hvigor构建配置，实现ArkTS与JS的数据交互。这种模式适用于需深度结合鸿蒙特性的应用场景。

更多关于HarmonyOS鸿蒙Next中uniapp和ArkTS混合开发的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中，将UniApp代码与ArkTS工程进行混合开发，核心在于利用HarmonyOS的Web组件承载UniApp编译后的Web资源，并通过ArkTS与Web页面的双向通信机制实现功能集成。

主要实现路径如下：

  1. 工程结构准备：创建一个标准的HarmonyOS ArkTS工程。将UniApp项目通过HBuilderX等工具，编译为纯前端资源包（包含HTML、JS、CSS等文件）。

  2. 资源集成：将UniApp编译后的前端资源包（例如www或dist目录下的所有文件），拷贝至ArkTS工程的entry/src/main/resources/rawfile目录下。这是HarmonyOS应用存放原始资源文件的固定位置。

  3. 使用Web组件加载：在ArkTS的页面（.ets文件）中，使用Web组件来加载并渲染UniApp的入口页面（如index.html）。

    @Entry
@Component
struct UniAppContainer {
  controller: WebController = new WebController();

  build() {
    Column() {
      Web({ src: $rawfile('index.html'), controller: this.controller })
        .width('100%')
        .height('100%')
    }
    .width('100%')
    .height('100%')
  }
}

  4. 实现双向通信（关键）：

    • ArkTS调用UniApp（Web）方法：通过WebController的runJavaScript方法执行Web侧的JS函数，实现数据传递与功能调用。
    • UniApp（Web）调用ArkTS能力：在ArkTS侧通过Web组件的javaScriptProxy方法，将ArkTS对象（标注了@Concurrent的方法）注入到Web侧，供其调用。这允许UniApp的JS代码直接调用HarmonyOS的系统能力（如设备接口、本地存储等）。

重要注意事项：

  • API差异：UniApp框架的部分API（尤其是涉及原生设备功能的API）在HarmonyOS Next的Web组件环境中可能无法直接使用或需要适配。需要将这部分功能通过上述通信机制，桥接到ArkTS侧，使用HarmonyOS的系统API重新实现。
  • 性能与体验：此模式本质上是Web应用嵌套。对于追求高性能、深度系统集成或复杂交互的页面，建议使用ArkTS原生开发。混合方案更适用于将现有UniApp业务模块快速集成至新应用，或对性能要求不高的场景。
  • 调试：UniApp部分的代码调试主要在Web开发工具中进行。与ArkTS的通信联调相对复杂，需仔细设计通信协议与数据格式。

总结，混合开发的关键是Web组件与javaScriptProxy/runJavaScript双向通信。通过这种方式，可以在ArkTS应用框架内复用UniApp的Web业务逻辑，同时由ArkTS提供HarmonyOS系统的原生能力支持。

回到顶部