Android WebView与Native通信总结，android适配器ui

• 对于Javascript的请求，native端应该如何设计?
• …

native端向JavaScript发送消息只有loadUrl, evaluateJavascript这两种方式。Javascript向native端发送信息可以利用onJsPrompt, @JavascriptInterface, shouldOverrideUrlLoading等几种方案，以下 我们通过采用@JavascriptInterface这种方式(也就是大家通常说的注解方案)为例来看看如何解决实际项目开发中碰到的问题。

交互的规则

首先我们来定义两端的交互规则。

Javascript向native发数据：

我们约定在H5中采用HybridAPI.sendToNative方法向native端发送数据，于是我们需要在native端做如下支持：

• 定义一个HybridAPI类，并向WebView中注册

HybridAPI hybridAPI = new HybridAPI(this);
webview.addJavascriptInterface(hybridAPI, “HybridAPI”);

• 在HybridAPI类中定义一个方法sendToNative, 该方法暴露给Javascript用来给native发送数据

@JavascriptInterface
public void sendToNative(final String message) {
Log.i(TAG, “get data from js------------>” + message);

}

native层向Javascript发数据：

public final String TO_JAVASCRIPT_PREFIX = “javascript:HybridAPI.onReceiveData(’%s’)”;

public void sendToJavaScript(Map<String, Object> message) {
String str = new Gson().toJson(message);
final String jsCommand = String.format(TO_JAVASCRIPT_PREFIX, escapeString(str));

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
evaluateJavascript(jsCommand, null);
} else {
loadUrl(jsCommand);
}
}

在H5中，我们这样写, 当native向Javascript发送数据时，便会触发Javascript中的Hybrid.onReceiveData方法, 该方法就能接收到native层传过来的数据

HybridAPI.onReceiveData = function(message) {
console.log(’[response from native]’ + message);
}

数据结构的定义

在上面我们已经基于@J![](https://www.hualigs.cn/image/61dba891ed8ee.jpg) avascriptInterface方案完成了native与WebView间通信机制的实现，