android JSBridge回调JS端函数，未触发回调问题解决

先来看下android JAVA示例代码：

wv_webview.registerHandler("ShowInputBox", new BridgeHandler() {
            @Override
            public void handler(String data, final CallBackFunction function) {
                
                HashMap 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，直接替换了。