鸿蒙OS嵌入H5的时候，关于和H5交互时候的桥接方式有几种方式？

Question

我想问一下，鸿蒙OS嵌入H5的时候，关于和H5交互时候的桥接方式有几种方式？

本文参与了思否 HarmonyOS 技术问答马拉松，欢迎正在阅读的你也加入。

Answer 1

1.事件监听与触发
原生侧：定义一组事件监听器，这些监听器可以监听来自H5页面的特定事件或URL Scheme。
H5侧：通过JavaScript调用特定的函数或URL来触发原生侧的事件监听器，从而执行原生应用中的操作。
2.全局对象注入
原生侧：在Webview中注入一个全局对象，该对象包含一系列方法，这些方法封装了原生应用的功能。
H5侧：通过访问这个全局对象的方法来实现与原生的交互，调用原生功能。
3.消息队列
原生侧：创建一个消息队列，用于接收和处理来自H5页面的消息。
H5侧：通过发送消息到消息队列来请求原生执行某些操作，原生侧按顺序处理这些任务。
4.Promise风格的API
原生侧：提供一组Promise风格的API，这些API允许H5页面以异步方式调用原生功能。
H5侧：使用Promise或async/await语法来调用这些API，并处理返回的结果。
5.Web组件
原生侧：定义一个Web组件，该组件封装了与H5交互的逻辑。
H5侧：在H5页面中使用这个Web组件，通过组件的属性和事件与原生进行交互。
6.自定义协议
原生侧：定义一个自定义协议，H5页面可以通过这个协议与原生进行通信。
H5侧：通过JavaScript调用URL或发送HTTP请求来触发这个自定义协议，从而执行原生应用中的操作。
7.使用javaScriptProxy属性
在ArkTS（ArkUI的TypeScript声明式开发范式）中，可以通过Web组件的javaScriptProxy属性将原生侧的桥接类实例注册到H5侧的window对象上。

Answer 2

在鸿蒙OS（HarmonyOS）中嵌入H5页面并实现与H5的交互，通常采用的是JSBridge（JavaScript Bridge）的方式。JSBridge是一种常见的技术手段，用于实现原生应用与H5页面之间的双向通信。以下是几种常见的桥接方式：

1. 基于事件监听的交互

• 原生侧：定义一组事件监听器，H5页面可以通过特定的URL Scheme或者自定义协议触发这些监听器。
• H5侧：通过JavaScript调用特定的函数或URL来触发原生事件。

2. 基于全局变量的交互

• 原生侧：在Webview中注入一个全局对象，该对象包含一系列方法，H5页面可以通过这个全局对象调用原生功能。
• H5侧：通过访问全局对象的方法来实现与原生的交互。

3. 基于消息队列的交互

• 原生侧：创建一个消息队列，H5页面发送的消息被封装成任务对象放入队列中，原生侧按顺序处理这些任务。
• H5侧：通过发送消息到消息队列来请求原生执行某些操作。

4. 基于Promise的异步交互

• 原生侧：提供一组Promise风格的API，H5页面可以通过调用这些API并传入回调函数来实现异步交互。
• H5侧：使用Promise或者async/await语法来调用原生API并处理结果。

5. 基于Web组件的交互

• 原生侧：定义一个Web组件，该组件封装了与H5交互的逻辑。
• H5侧：在H5页面中使用这个Web组件，通过组件的属性和事件与原生进行交互。

6. 基于自定义协议的交互

• 原生侧：定义一个自定义协议，H5页面可以通过这个协议与原生进行通信。
• H5侧：通过JavaScript调用URL或者发送HTTP请求来触发自定义协议。

可以根据具体需求和场景选择最合适的桥接方式。例如，如果需要频繁地进行双向数据交换，可能会选择基于事件监听或消息队列的方式；如果交互较为简单，可能会选择基于全局变量的方式。在鸿蒙OS中，可以使用@ohos.ark包中的相关API来实现这些交互方式。