Android中webview与native之间的交互方式（jsbridge）

Android中webview与native之间的交互方式（jsbridge）

前言

​ 随着H5的广泛使用，Android开发过程中免不了会使用网页来做展示，那么，web与native之间的通信就显得尤其重要了，其实际上是JavaScript与java之间的通信；如图所示，我们开发过程中需要在native中调用JavaScript，或者是在JavaScript中调用native。

* JavaScript调用java

JavaScript调用java的方式可以分为两类，一是通过捕获url scheme的方式，二是利用原生接口实现调用。

1. 捕获url scheme的方式

​ 核心思想是：web端与native首先协商好通信中使用的url的格式，紧接着web端通过一定的方式将url发送出去，最后native层捕获url，并进行分析后再去调用原生方法。这种方法也是目前被广泛使用的方式。

a) 首先第一步是约定好url的格式，例如这里约定为：


JSBridge://bridge:129129723/showToast?{"msg":"Hello JSBridge"}


其中showToast为需要调用的native层方法，{“msg”:”Hello JSBridge”}为向native传递的json数据。

b) 约定好传递格式后，web端需要触发native层去捕获url。

​ Android中为我们提供了两个类WebViewClient和WebChromeClient，这两个类分别为我们提供了一些方法可以使用。当有任何url在webview中使用时都会被WebViewClient的shouldOverrideUrlLoading函数拦截，因此我们可以利用这个特性，在JavaScript中构建一个1像素的iframe来触发这个函数。web端代码如下：


var url = 'JSBridge://bridge:129129723/showToast?{"msg":"Hello JSBridge"}';
var iframe = document.createElement('iframe');
iframe.style.width = '1px';
iframe.style.height = '1px';