Native（以Android为例）和H5通讯，基本原理：
- Android调用H5：通过webview类的loadUrl方法可以直接执行js代码，类似浏览器地址栏输入一段js一样的效果
String javascriptCommand = String.format("javascript:WebViewJavascriptBridge._handleMessageFromNative('%s');", messageJson);
webview.loadUrl(javascriptCommand);
- H5调用Android：webview可以拦截H5发起的任意url请求，webview通过约定的规则对拦截到的url进行处理（消费），即可实现H5调用Android
var WVJBIframe = document.createElement('iframe');
WVJBIframe.style.display = 'none';
WVJBIframe.src = 'ddjsscheme://***';
document.documentElement.appendChild(WVJBIframe);
实现步骤
1. H5调用原生方法实现步骤
h5调用原生方法有4个关键点：
1. 通讯媒介——原生通讯协议
ddjsscheme://return/_fetchQueue/[{"handlerName":"dd.native.call","data":{"handlerName":"biz.navigation.setTitle","params":{"title":"标题"}},"callbackId":"cb_1_1504142561851"}]
通过webview拦截到自定义约定的协议，就可以做相应的处理。
2. 通讯行为——触发
能被原生监听并捕获截拦的H5行为，都可以作为原生通讯协议的触发行为。Hybrid H5 的这类行为有 console.log、alert、confirm、prompt、location.href 等。将原生协议内容通过其中的某一行为触发，即可被原生正确捕获并解析。本文通过：WVJBIframe.src = 'ddjsscheme://';触发。
触发详细流程
当h5页面调用如下接口时
dd.biz.navigation.setTitle({
title: '邮箱正文',
onSuccess: function(data) {},
onFail: function(error) {}
})
接着会调用此方法
function _executeFuction (methodName, options) {
//alert('_executeFuction' + methodName)
if (dd.isInit) {
!!window['_' + methodName] && window['_' + methodName](options)
} else {
!!dd && setupWebViewJavascriptBridge(function () {
if (window.WebViewJavascriptBridge.init) {
if (!dd.isInit) {
//alert('WebViewJavascriptBridge init')
window.WebViewJavascriptBridge.init(function(message, responseCallback) {})
}
}
dd.isInit = true;
setTimeout(function() {
!!window['_' + methodName] && window['_' + methodName](options)
}, 100);
});
}
}
以本人的半杯水js水平来看，先调用setupWebViewJavascriptBridge方法：
function setupWebViewJavascriptBridge(callback) {
if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
window.WVJBCallbacks = [callback];
var WVJBIframe = document.createElement('iframe');
WVJBIframe.style.display = 'none';
WVJBIframe.src = 'ddjsscheme://__bridge_loaded__';
document.documentElement.appendChild(WVJBIframe);
setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
}
如果WebViewJavascriptBridge加载完成就调用window.WebViewJavascriptBridge.init(function(message, responseCallback) {});如果没有加载完成WVJBIframe.src = 'ddjsscheme://__bridge_loaded__';然后native拦截加载本地的WebViewJavascriptBridge
if (url.equals("ddjsscheme://__bridge_loaded__")) {
//加载bridge
BridgeUtil.webViewLoadLocalJs(view, BridgeWebView.toLoadJs);
}
接着回来说window.WebViewJavascriptBridge.init(function(message, responseCallback) {})
function init(messageHandler) {
if (WebViewJavascriptBridge._messageHandler) {
throw new Error('WebViewJavascriptBridge.init called twice');
}
WebViewJavascriptBridge._messageHandler = messageHandler;
var receivedMessages = receiveMessageQueue;
receiveMessageQueue = null;
for (var i = 0; i < receivedMessages.length; i++) {
_dispatchMessageFromNative(receivedMessages[i]);
}
}
//提供给native使用,
function _dispatchMessageFromNative(messageJSON) {
setTimeout(function() {
var message = JSON.parse(messageJSON);
var responseCallback;
//java call finished, now need to call js callback function
if (message.responseId) {
responseCallback = responseCallbacks[message.responseId];
if (!responseCallback) {
return;
}
responseCallback(message.responseData);
delete responseCallbacks[message.responseId];
} else {
//直接发送
if (message.callbackId) {
var callbackResponseId = message.callbackId;
responseCallback = function(responseData) {
_doSend({
responseId: callbackResponseId,
responseData: responseData
});
};
}
var handler = WebViewJavascriptBridge._messageHandler;
if (message.handlerName) {
handler = messageHandlers[message.handlerName];
}
//查找指定handler
try {
handler(message.data, responseCallback);
} catch (exception) {
if (typeof console != 'undefined') {
console.log("WebViewJavascriptBridge: WARNING: javascript handler threw."+message.data, message.data, exception);
}
}
}
});
}
//sendMessage add message, 触发native处理 sendMessage
function _doSend(message, responseCallback) {
if (responseCallback) {
var callbackId = 'cb_' + (uniqueId++) + '_' + new Date().getTime();
responseCallbacks[callbackId] = responseCallback;
message.callbackId = callbackId;
}
sendMessageQueue.push(message);
messagingIframe.src ='ddjsscheme://__WVJB_QUEUE_MESSAGE__';
}
js不太懂，能看懂流程就可以啦，特别注意_doSend方法里的这行sendMessageQueue.push(message);代码，message就是就是我们从h5调用接口传过来的参数，后面会用到！这时又发出一条协议messagingIframe.src ='ddjsscheme://__WVJB_QUEUE_MESSAGE__';,我们再去本地看看做了什么操作：
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
if (url.startsWith(BridgeUtil.YY_OVERRIDE_SCHEMA)) { //拦截'ddjsscheme://__WVJB_QUEUE_MESSAGE__'
webView.flushMessageQueue();
return true;
} else {
return shouldOverrideUrl(view, url);
}
}
void flushMessageQueue() {
if (Thread.currentThread() == Looper.getMainLooper().getThread()) {
loadUrl(BridgeUtil.JS_FETCH_QUEUE_FROM_JAVA, new CallBackFunction() {
@Override
public void onCallBack(String data) {
// deserializeMessage
List list = null;
try {
list = Message.toArrayList(data);
} catch (Exception e) {
e.printStackTrace();
return;
}
if (list == null || list.size() == 0) {
return;
}
for (int i = 0; i < list.size(); i++) {
Message m = list.get(i);
String responseId = m.getResponseId();
// 是否是response
if (!TextUtils.isEmpty(responseId)) {
CallBackFunction function = responseCallbacks.get(responseId);
String responseData = m.getResponseData();
function.onCallBack(responseData);
responseCallbacks.remove(responseId);
} else {
CallBackFunction responseFunction = null;
// if had callbackId
final String callbackId = m.getCallbackId();
if (!TextUtils.isEmpty(callbackId)) {
responseFunction = new CallBackFunction() {
@Override
public void onCallBack(String data) {
Message responseMsg = new Message();
responseMsg.setResponseId(callbackId);
responseMsg.setResponseData(data);
queueMessage(responseMsg);
}
};
}
BridgeHandler handler;
if (!TextUtils.isEmpty(m.getHandlerName())) {
handler = messageHandlers.get(m.getHandlerName());
} else {
handler = defaultHandler;
}
if (handler != null){
handler.handle(m.getData(), responseFunction);
}
}
}
}
});
}
}
public void loadUrl(String jsUrl, CallBackFunction returnCallback) {
this.loadUrl(jsUrl);
responseCallbacks.put(BridgeUtil.parseFunctionName(jsUrl), returnCallback)
}
这里的回调暂时先不关注，后面我们在分析，注意responseCallbacks这个是个 map集合。它的value就是一个回调函数，同时还需知道responseFunction这个是native返回给h5的回调，这里只需知道有这么个概念，后面我们会讲解。this.loadUrl(jsUrl);这里又加载了一段jsjavascript:WebViewJavascriptBridge._fetchQueue();
function _fetchQueue() {
var messageQueueString = JSON.stringify(sendMessageQueue);
sendMessageQueue = [];
//android can't read directly the return data, so we can reload iframe src to communicate with java
messagingIframe.src = CUSTOM_PROTOCOL_SCHEME + '://return/_fetchQueue/' + encodeURIComponent(messageQueueString);
}
这是重点！ 这是重点！ 这是重点！重要的事说三遍！这里把sendMessageQueue转换成json格式方便native解析，然后把sendMessageQueue回收掉，又到了我们熟悉的
messagingIframe.src = CUSTOM_PROTOCOL_SCHEME + '://return/_fetchQueue/' + encodeURIComponent(messageQueueString);
再看一下本地做了什么操作：
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
if (url.startsWith(BridgeUtil.YY_RETURN_DATA)) { // 如果是返回数据
webView.handlerReturnData(url);
return true;
} else {
return shouldOverrideUrl(view, url);
}
}
void handlerReturnData(String url) {
String functionName = BridgeUtil.getFunctionFromReturnUrl(url);
CallBackFunction f = responseCallbacks.get(functionName);
String data = BridgeUtil.getDataFromReturnUrl(url);
if (f != null) {
f.onCallBack(data);
responseCallbacks.remove(functionName);
return;
}
}
这里f.onCallBack(data);调用的就是flushMessageQueue()里的回调，data就是h5传过来的参数
[{"handlerName":"dd.native.call","data":{"handlerName":"biz.navigation.setTitle","params":{"title":"标题"}},"callbackId":"cb_2_1504156072331"}]
第一个handlerName是作为messageHandlersmap的键；
第二个handlerName是native方法路径
params是h5传过来的设置标题的值
callbackId用来回调的在回调这节再去讲解
至此，h5与native通信的触发过程讲解完毕，下节我们一起看看flushMessageQueue()里的回调是如何做处理的。
3. 通讯行为——处理
在flushMessageQueue()里有这么一段代码
if (!TextUtils.isEmpty(m.getHandlerName())) {
handler = messageHandlers.get(m.getHandlerName());
} else {
handler = defaultHandler;
}
if (handler != null) {
handler.handle(m.getData(), responseFunction);
}
这个handler意义在于处理h5传过来的数据，使用之前需要注册：
public void registerHandler(String handlerName, BridgeHandler handler) {
if (handler != null) {
messageHandlers.put(handlerName, handler);
}
}
webView.registerHandler(sFunction, new BridgeHandler() {
@Override
public void handle(String data, CallBackFunction function) {
dispatchTask(data, function);
}
});
注册时需要键值对，键就是之前说的第一个handlerName,value是BridgeHandler,调用handle(String data, CallBackFunction function)时传入就data是：
{"handlerName":"biz.navigation.setTitle","params":{"title":"标题"}}
function就是用于回调给h5的，下面再看一下dispatchTask(data, function);
private void dispatchTask(String data, CallBackFunction callBackFunction) {
try {
JSONObject jo = new JSONObject(data);
final String handlerName = jo.getString("handlerName");
String params = jo.getString("params");
Log.d(TAG, "# ============ ");
Log.d(TAG, "# request call ---> " + handlerName);
Log.d(TAG, "# request params ---> " + params);
// 接口调用每次都只执行一次,为了能多次执行,这里需要再重复调用原来的接口
if (null == callBackFunction) {
callBackFunction = new CallBackFunction() {
@Override
public void onCallBack(String data) {
mWebView.callHandler(handlerName, data, null);
}
};
}
String[] split = handlerName.split("\\.");
String packageName = "***";
String className = split[split.length - 2];
String methodName = split[split.length - 1];
for (int i = 0; i < split.length - 2; i++) {
packageName += "." + split[i];
}
packageName +=
"." + Character.toUpperCase(className.charAt(0)) + className.substring(1);
Class clazz = Class.forName(packageName);
Constructor constructor = clazz.getConstructor(BridgeWebView.class, Context.class);
Object obj = constructor.newInstance(mWebView, this);
Method method = clazz.getMethod(methodName, String.class, CallBackFunction.class);
method.invoke(obj, params, callBackFunction);
} catch (JSONException | IllegalAccessException | InvocationTargetException
| NoSuchMethodException | ClassNotFoundException | InstantiationException e) {
e.printStackTrace();
}
}
知道了方法路径，参数利用反射一切都水到渠成了，再看一下setTitle的处理：
public void setTitle(String data, CallBackFunction callBackFunction) {
String result = null;
JSONObject jo = new JSONObject();
try {
Log.d("setTitle==TTT===", data);
JSONObject params = new JSONObject(data);
String title = params.optString("title", "");
if (mContext != null) {
((HybridActivity) mContext).setHeadTitle(title);
}
jo.put("result", true);
result = new ResultCallBack().onSuccessResult(jo);
} catch (JSONException e) {
e.printStackTrace();
try {
jo.put("result", false);
} catch (JSONException e1) {
e1.printStackTrace();
}
result = new ResultCallBack()
.onFailResult(jo);
}
callBackFunction.onCallBack(result);
}
这样h5调用native的处理步骤讲解完毕，下面通过CallBackFunction讲解如何回调给js的。
4. 通讯行为——回调
还记得在触发那个步骤中的flushMessageQueue的这一段代码吗：
CallBackFunction responseFunction = null;
// if had callbackId
final String callbackId = m.getCallbackId();
if (!TextUtils.isEmpty(callbackId)) {
responseFunction = new CallBackFunction() {
@Override
public void onCallBack(String data) {
Message responseMsg = new Message();
responseMsg.setResponseId(callbackId);
responseMsg.setResponseData(data);
queueMessage(responseMsg);
}
};
}
当调用这段callBackFunction.onCallBack(result);代码，就会回调到上面那段代码，在queueMessage(responseMsg);又会调用
String javascriptCommand = String.format("javascript:WebViewJavascriptBridge._handleMessageFromNative('%s');", messageJson);
webview.loadUrl(javascriptCommand);
js会把参数回调给h5，这样h5调用native的流程就走通了。
2. 原生调用H5方法实现步骤
未完待续
参考文章
Hybrid APP架构设计思路
解耦---Hybrid H5跨平台性思考