我们先来了解一下H5和原生应用之间通信的几种常见方法:

  1. URL Scheme:通过自定义URL协议触发原生功能
  2. URL参数传递:通过URL查询字符串传递数据
  3. JSBridge:通过JavaScript接口实现双向通信
  4. 第三方Hybrid框架:如Cordova、React Native等提供的通信机制

image.png

JSBridge

概念和作用

通信桥梁: JSBridge 充当了 Web 应用和原生应用之间的通信桥梁。通过 JSBridge,我们可以在 web 和原生代码之间进行双向通信,使这两者能够互相调用和传递数据

原生功能调用: 使用 JSBridge,我们可以在 JavaScript 中调用原生应用中的功能。我们可以通过 web 来触发原生应用中的特定操作,如打开相机、发送通知、调用硬件设备等。

在Hybrid模式下,H5会需要使用Native的功能,比如打开二维码扫描、调用原生页面、获取用户信息等,同时Native也需要向Web端发送推送、更新状态等。

而JavaScript是运行在单独的 JS Context 中(Webview容器)与原生有运行环境的隔离,所以需要有一种机制实现Native端和Web端的 双向通信 ,这就是JSBridge:

以JavaScript引擎或Webview容器作为媒介,通过协定协议进行通信,实现Native端和Web端双向通信的一种机制。

通过JSBridge,Web端可以调用Native端的Java接口,同样Native端也可以通过JSBridge调用Web端的JavaScript接口,实现彼此的双向调用。


核心工作原理

JSBridge的核心原理是JavaScript接口注入。

原生应用接口注入到WebView的JavaScript环境中,使得H5页面能够直接调用这些接口。