HarmonyOS开发实战指南：鸿蒙应用组件化-Hybrid

最新推荐文章于 2025-10-10 23:35:23 发布

原创

最新推荐文章于 2025-10-10 23:35:23 发布 · 1.7k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#harmonyos #华为 #前端 #鸿蒙 #程序员 #鸿蒙开发

场景描述

Hybrid应用开发是介于Web应用和原生应用两者之间的应用开发技术，兼具“原生应用良好交互体验”的优势和“Web应用跨平台开发”的优势。其主要原理是由Native通过JSBridge通道提供统一的API，然后用Html/CSS实现界面，JS来写业务逻辑，能够调用系统API，最终的页面在Webview中显示。

Hybrid应用鸿蒙化方案

整体架构

Ark进程：由ArkTS引擎提供运行时，具备调用系统API的能力。应用启动从Ark进程进入，完成EntryAbility的初始化并创建鸿蒙应用页面。Ark进程可以动态或者静态创建Webview运行时环境，并加载html/css/js资源文件。
Webview进程：默认支持标准W3C API，对原生侧资源的访问有限制。Webview渲染能力主要由鸿蒙Web组件提供。用户可以通过Web组件的属性配置是否开启同层渲染能力、是否允许执行JavaScript脚本等。
JSBridge：上述两种进程的通讯机制，允许数据双向流动。Webview进程通过JSBridge通道访问原生拓展API。

方案设计

Hybrid应用鸿蒙化方案主要集中在双端通信JSBridge实现、拓展接口实现，以及基于同层渲染的原生组件实现。JSBridge是前端与原生进行双向通信的桥梁。通过JSBridge，前端应用能访问到原生侧实现的拓展接口，实现更丰富的业务功能。视图层方面，可以使用系统提供的同层渲染能力，把部分性能要求比较高的前端组件改成原生实现，以达到更好的体验效果。下图蓝色背景的方框图展示了上述三点所处的框架位置：

业务实现中的关键点

Hybrid应用鸿蒙化方案主要围绕双端通信、API鸿蒙化、组件鸿蒙化三方面进行开发。双端通信：JS侧使用原生能力的通道，是鸿蒙化的基石；API鸿蒙化：针对JS侧平台相关的API，提供一套鸿蒙版本的实现；组件鸿蒙化：针对Web组件，以同层渲染的方式提供替代组件，以提升组件的性能与交互体验。

双端通信

JSBridge扮演Webview进程与原生ArkUI主进程沟通的桥梁，是一种双向通信的机制。HarmonyOS系统提供Web组件以及@ohos.web.webview 等ArkWeb API 来进行Web开发。可以通过 WebMessagePort 以及 javaScriptProxy 代理的方式实现JSBridge。

WebMessagePort 是一种比较基础的消息发送以及接收机制，支持的消息类型为string和ArrayBuffer，具体业务消息内容的封装和解析需要从零设计，存在上手难、工作量大的特点。
JavaScriptProxy 代理机制注入ArkUI主进程对象（如命名为native）到Webview中，在Webview的window上生成对应代理对象，业务可以直接调用该代理对象的方法，相关的操作将作用到ArkUI主进程的native对象。比如拉起拨打电话界面示例：

build() {
  Column() {
    // web组件加载本地index.html页面
    Web({ src: $rawfile('index.html'), controller: webviewController})
      // 将对象注入到web端
      .javaScriptProxy({
        object: nat