先来看下android JAVA示例代码:
wv_webview.registerHandler("ShowInputBox", new BridgeHandler() {
@Override
public void handler(String data, final CallBackFunction function) {
HashMap<String,Object> map = JsonUtils.parseJsonToMap(data);
String title = map.get("title").toString();
String placeholder = map.get("placeholder").toString();
final QMUIDialog.EditTextDialogBuilder builder = new QMUIDialog.EditTextDialogBuilder(thisActivity);
builder.setTitle(title).setPlaceholder(placeholder)
.setInputType(InputType.TYPE_CLASS_TEXT)
.addAction("取消", new QMUIDialogAction.ActionListener() {
@Override
public void onClick(QMUIDialog dialog, int index) {
function.onCallBack("来自java的输出...");
dialog.dismiss();
}
})
.addAction("确定", new QMUIDialogAction.ActionListener() {
@Override
public void onClick(QMUIDialog dialog, int index) {
String text = builder.getEditText().getText().toString();
function.onCallBack(text);
//dialog.dismiss();
}
})
.create(mCurrentDialogStyle).show();
}
});
再来看下H5端的JS代码:
if (!window.WebViewJavascriptBridge) {
document.addEventListener('WebViewJavascriptBridgeReady', function() {
console.log('WebViewJavascriptBridgeReady...');
$('div[edit=true]').click(
function() {
var $this = $(this);
var _title = $(this).attr("title");
var _placeholder = $(this).attr("placeholder");
var _data = {
title : _title,
placeholder : _placeholder
};
window.WebViewJavascriptBridge.callHandler(
'ShowInputBox', _data, function(resp) {
console.log("回调事件...");
$this.find('span:first-child').html(resp);
});
});
}, false);
}
问题出在:JS调用Native接口ShowInputBox,可以调用成功,但是Native回传数据给JS时,总是没成功,也没有任何错误输出,导致无法修改页面数据。。。
这个问题纳闷了好几个钟,经过反复确认代码是没有问题的,不得以只好仔细分析JSBridge源码,最终发现数据传递到WebViewJavascriptBridge.js里头的_handleMessageFromNative()就暴走了,然后就想调教下WebViewJavascriptBridge.js,把JSBridge下载下来,然后改成手动导入库到项目里头。
修改手动导入的WebViewJavascriptBridge.js,简单增加个console.log(),直接就好了。。。推测是js文件编码原因导致的奇怪现象,经过编辑器改动后编码又好了。
总结:推测是编码原因或是数据转义错误,可手动下载源码后本地一步步调试。
2018-12-30更新:
发现了JSBridge的增强版:DSBridge,支持通过类的方式集中管理API,直接替换了。