交互的规则
首先我们来定义两端的交互规则。
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);
}
数据结构的定义
在上面我们已经基于@JavascriptInterface
方案完成了native与WebView间通信机制的实现,双方可以交换数据,但开发的时候需要考虑更多问题。比如,如果是Javascript向native发送数据,需要将数据转换成一个字符串,然后再将字符串发给native, native再去解析这个字符串,找到对应的处理方法,提取出相关的业务参数,再进行相应的处理。所以我们需要定义这个字符串的数据结构。
在上面我们已经约定了,H5端可以采用HybridAPI.sendToNative
向native发送数据,该方法只有一个字符串参数, 以获取用户信息
这个业务功能为例,我们的字符串参数是native://getUserInfo?id=1
,这个字符串中的getUserInfo
表示当前通信的目的或行为(为了拿用户信息), ?
后面的<