- 对于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间通信机制的实现,