Skip to content
标签
note
字数
1437 字
阅读时间
6 分钟

几种实现

Native 端与 H5 通信的实现方式主要有以下几种:

  1. URL Scheme

Native 端通过注册一个特定的 URL Scheme,来监听 H5 页面发送的 URL 请求,并解析其中的参数。当 H5 页面需要向 Native 端发送数据时,可以通过拼接 URL 的方式,将数据作为 URL 参数传递给 Native 端。

  1. JS Bridge

JS Bridge 是一种通过在 WebView 中注入原生的 JS 对象,实现 H5 页面与 Native 端通信的技术。在 Native 端中,通过创建一个 JSBridge 对象并将其注入到 WebView 中,将 Native 端提供的 API 暴露给 H5 页面调用,从而实现 H5 页面与 Native 端的通信。

  1. LocalStorage

LocalStorage 是 HTML5 中的一种存储数据的方式,可以将数据存储在客户端本地。在 H5 页面中,可以将需要传递的数据存储在 LocalStorage 中,Native 端通过监听 LocalStorage 的变化,获取 H5 页面中存储的数据。

  1. postMessage

postMessage 是 HTML5 中的一种跨域通信技术,可以实现不同页面间的数据传递。在 H5 页面中,可以使用 window.postMessage 方法将数据传递给 Native 端,Native 端通过监听 window.postMessage 事件,获取 H5 页面传递的数据。

  1. WebSocket

WebSocket 是一种双向通信协议,可以实现客户端与服务器之间的实时数据通信。在 Native 端中,可以通过创建 WebSocket 对象并连接到服务器,将客户端与服务器之间的通信实时传递给 H5 页面。在 H5 页面中,可以通过 WebSocket 对象向服务器发送数据,从而实现 Native 端与 H5 页面之间的数据通信。

需要根据具体情况选择合适的通信方式,同时需要注意通信的安全性和性能问题

js bridge 和 url schema 的区别

  1. 实现原理

URL Schema 是一种基于 URL 的通信方式,通过构造特定的 URL 来实现 Native 和 H5 之间的通信。当 H5 页面需要调用 Native 功能时,会构造一个特定的 URL,通过浏览器的跳转功能将 URL 传递给 Native 应用程序,Native 应用程序收到 URL 后解析其中的参数,从而实现对应的功能。当 Native 应用程序需要调用 H5 页面的功能时,也可以通过构造 URL 的方式,将参数传递给 H5 页面,从而实现通信。

JS Bridge 则是一种基于 WebView 的通信方式,通过在 Native 应用程序中注入 JavaScript 代码,使得 JavaScript 可以直接访问 Native 功能,从而实现 Native 和 H5 之间的通信。当 H5 页面需要调用 Native 功能时,通过调用注入的 JavaScript 接口来实现,Native 应用程序接收到 JavaScript 的调用请求后,执行对应的 Native 功能。当 Native 应用程序需要调用 H5 页面的功能时,同样可以通过调用 JavaScript 接口来实现通信。

  1. 应用场景

URL Schema 通常适用于 Native 应用程序需要向 H5 页面传递简单数据或者调用简单功能的场景,例如 H5 页面需要跳转到 Native 应用程序的特定页面、Native 应用程序需要打开 H5 页面等。

JS Bridge 则适用于需要在 H5 页面和 Native 应用程序之间进行复杂交互、传递大量数据或者调用复杂功能的场景,例如在 H5 页面中进行支付、调用相机等操作。

选择 js bridge 的原因

JS Bridge 相对于 URL Schema 更适合复杂功能的场景,主要有以下几个原因:

  1. 支持双向通信

JS Bridge 支持双向通信,即 H5 页面可以调用 Native 应用程序的功能,同时 Native 应用程序也可以调用 H5 页面的功能。这种双向通信的能力使得 JS Bridge 可以支持更为复杂的业务场景,例如在 H5 页面中进行支付、上传图片、操作相机等等。而 URL Schema 则只能实现单向通信,只能从 H5 页面向 Native 应用程序发送简单的请求。

  1. 支持传递大量数据

JS Bridge 可以支持传递大量的数据,这是因为 JS Bridge 基于 WebView,在 Native 应用程序中可以直接使用 JavaScript 对象来传递数据。相对于 URL Schema 而言,JS Bridge 传递数据更为方便,也更为高效。

  1. 支持动态加载

JS Bridge 可以动态加载 JavaScript 代码,从而实现动态扩展功能。这种能力使得 JS Bridge 可以根据业务需求动态加载功能,不需要重复编写和发布 Native 应用程序。

  1. 易于维护和升级

JS Bridge 可以通过升级 WebView 或者更新 JavaScript 代码来实现升级和维护,这种方式相对于升级 Native 应用程序来说更为简单和高效。另外,由于 JS Bridge 是基于标准的 Web 技术实现的,因此跨平台性更好,能够更方便的实现多平台的应用程序。

综上所述,JS Bridge 更适合于复杂功能的场景,能够支持双向通信、传递大量数据、动态加载和易于维护等优点,相对于 URL Schema 而言更为灵活、高效、可扩展性更好。

参考

ChatGPT

贡献者

The avatar of contributor named as jiechen jiechen

页面历史

撰写