WebViewJavascriptBridge 详解：架起前端与原生的沟通桥梁

WebViewJavascriptBridge 简介

WebViewJavascriptBridge 是一个跨平台库，它允许 H5 页面与原生应用进行通信。它最初由跨平台框架 PhoneGap 开发，后来被广泛用于各种移动应用开发中。

WebViewJavascriptBridge 的核心思想是通过一个叫做 "bridge" 的中间层来实现通信。这个 bridge 可以被看作是一个双向通道，一边连接着 H5 页面，另一边连接着原生应用。当 H5 页面需要调用原生方法时，它可以向 bridge 发送一个消息，bridge 然后会将这个消息转发给原生应用。同样地，当原生应用需要通知 H5 页面时，它也可以通过 bridge 来发送消息。

原理

WebViewJavascriptBridge 的原理相对简单。它主要依赖于 JavaScript 和原生的消息传递机制。

JavaScript

在 H5 页面中，WebViewJavascriptBridge 提供了一个 JavaScript API，允许开发者直接调用原生方法。这个 API 包括几个主要方法，如 init(), registerHandler(), callHandler() 等。

// 初始化 WebViewJavascriptBridge
WebViewJavascriptBridge.init();

// 注册一个原生方法的处理程序
WebViewJavascriptBridge.registerHandler("myMethod", function(data) {
  // 处理从原生应用收到的数据
});

// 调用一个原生方法
WebViewJavascriptBridge.callHandler("myMethod", {"data": "hello world"}, function(response) {
  // 处理从原生应用收到的响应
});

原生

在原生应用中，WebViewJavascriptBridge 提供了一个原生接口，允许开发者注册原生方法和处理 H5 页面发来的消息。这个接口也包括几个主要方法，如 registerHandler(), callHandler(), send() 等。

// 注册一个原生方法
WebViewJavascriptBridge.registerHandler("myMethod", new JavascriptInterface() {
  @Override
  public void handle(String data, Callback responseCallback) {
    // 处理从 H5 页面收到的数据并返回结果
  }
});

// 调用一个 H5 页面中的方法
WebViewJavascriptBridge.callHandler("myMethod", "hello world", new Callback() {
  @Override
  public void onResult(String response) {
    // 处理从 H5 页面收到的响应
  }
});

// 向 H5 页面发送消息
WebViewJavascriptBridge.send("myMessage", "hello world");

使用方法

初始化

在使用 WebViewJavascriptBridge 之前，需要先初始化它。这可以在 H5 页面中通过调用 WebViewJavascriptBridge.init() 方法来实现。

WebViewJavascriptBridge.init();

注册原生方法的处理程序

当原生应用需要通知 H5 页面时，需要先注册一个原生方法的处理程序。这可以在原生应用中通过调用 WebViewJavascriptBridge.registerHandler() 方法来实现。

WebViewJavascriptBridge.registerHandler("myMethod", new JavascriptInterface() {
  @Override
  public void handle(String data, Callback responseCallback) {
    // 处理从 H5 页面收到的数据并返回结果
  }
});

调用原生方法

当 H5 页面需要调用原生方法时，可以通过调用 WebViewJavascriptBridge.callHandler() 方法来实现。

WebViewJavascriptBridge.callHandler("myMethod", {"data": "hello world"}, function(response) {
  // 处理从原生应用收到的响应
});

向 H5 页面发送消息

当原生应用需要向 H5 页面发送消息时，可以通过调用 WebViewJavascriptBridge.send() 方法来实现。

WebViewJavascriptBridge.send("myMessage", "hello world");

不同平台的实现

WebViewJavascriptBridge 可以