极客观点
项目管理
HarmonyOS
1、通过WebMessagePort可以进行消息的发送以及接收。
2、通过runJavaScript、registerJavaScriptProxy的JSBridge技术也能实现消息的收发
这两者有什么区别，数据量的传递上有什么规格，在什么场景下选择什么方案呢？
WebView中，双向交互可以使用JSBridge技术也可以使用端口通信技术，这两者有什么区别？
阅读 718
AI BotBETAWebView中的双向交互技术：JSBridge与端口通信（WebMessagePort）
区别：
- 技术原理：
* **JSBridge**：通过注入JavaScript代码或使用原生API，使WebView与原生代码进行通信。常见的技术如`runJavaScript`用于执行JavaScript代码，`registerJavaScriptProxy`用于注册JavaScript对象作为原生代码的代理，实现消息的发送和接收。
* **WebMessagePort**：WebMessagePort 是一种基于消息传递的端口通信技术，允许在 WebView 和原生代码之间建立双向通信通道。通过此通道，可以发送和接收结构化数据。- 数据格式与限制：
* **JSBridge**：没有固定的数据格式限制，可以通过字符串、JSON或其他格式传输数据。
* **WebMessagePort**：通常用于传输结构化数据，如消息对象。数据的格式和大小可能受到一些限制，取决于具体的实现和平台。- 性能与资源消耗：
* **JSBridge**：可能涉及更多的JavaScript解析和执行，可能会有一定的性能开销。
* **WebMessagePort**：基于消息传递的通信方式，通常具有更高的性能和更低的资源消耗。
数据量的传递规格：
- 对于数据量较小的简单消息，两者都可以满足需求。
- 对于大数据量或复杂结构的数据，JSBridge可能更具灵活性，因为它可以传输几乎任何格式的数据。而WebMessagePort可能更适合传输结构化或较小的数据。
选择方案的建议：
- 场景一：如果你的应用需要频繁地在WebView和原生代码之间进行大量数据的双向通信，并且对性能要求较高，那么WebMessagePort可能是一个更好的选择。
- 场景二：如果你的应用主要关注于简单的通信，或者需要传输非结构化数据，或者你已经在使用JSBridge技术并且不想进行大规模的技术迁移，那么可以继续使用JSBridge技术。
总之，选择哪种技术取决于你的具体需求、性能要求以及技术栈的兼容性。
撰写回答
你尚未登录，登录后可以
- 和开发者交流问题的细节
- 关注并接收问题和回答的更新提醒
- 参与内容的编辑和改进，让解决方法与时俱进
推荐问题
如何在WebMessagePort中发送复杂对象？
// 尝试：直接发送复杂对象messagePort.postMessage({type: "update", data: {id: 1}}); // 报错：不支持Object类型怎么处理发送复杂对象1 回答464 阅读✓ 已解决
鸿蒙系统启动内存测试方法有哪些？
鸿蒙系统启动内存测试方法？1 回答484 阅读
如何解决新API在旧版本系统中导致的崩溃问题？
系统API版本兼容问题现象：新API在旧版本系统崩溃在代码中做版本检测，配置兼容处理： {代码...} 还是会出现偶发性系统崩溃，应该怎么更好的处理1 回答410 阅读
鸿蒙应用进行内存泄漏测试工具及解决内存泄漏的调试方法？
鸿蒙应用进行内存泄漏测试工具及解决内存泄漏的调试方法？447 阅读
在rk3568开发板上运行hap一段时间后出现内存不足的提示，该如何确定是哪些应用或进程导致的？
在rk3568开发板上运行hap一段时间后出现内存不足的提示，该如何确定是哪些应用或进程导致的？437 阅读
如何解决常见的网络权限问题？
应用在进行网络请求时，由于未在配置文件中正确声明网络权限，导致请求失败。在日志中可能会出现权限不足的提示，如无法访问网络、网络请求被拒绝等。427 阅读
地图显示不全，地图界面仅显示部分区域，比如只显示了地图的左上角一块，其余部分为空白？
地图显示不全，地图界面仅显示部分区域，比如只显示了地图的左上角一块，其余部分为空白？396 阅读
JSBridge是一种JavaScript与Web客户端之间的通信机制。通过JSBridge，可以在WebView中通过JavaScript代码调用客户端提供的功能，也可以从客户端中调用JavaScript函数。JSBridge可能无法满足复杂的通信需求，这时可以使用端口通信技术来实现更灵活的跨平台通信。
使用runJavaScript与registerJavaScriptProxy的JSBridge技术：
使用WebMessagePort建立端口通信：
参考链接:
应用侧调用前端页面函数
前端页面调用应用侧函数
建立应用侧与前端页面数据通道