总结JsBridge 使用遇到的坑（fork并打了新的release）

github地址

https://github.com/lzyzsd/JsBridge

常规接入方式 

repositories {
    // ...
    maven { url "https://jitpack.io" }
}

dependencies {
    implementation 'com.github.lzyzsd:jsbridge:1.0.4'
}

//  java注册接口 给js调用
    webView.registerHandler("submitFromWeb", new BridgeHandler() {
        @Override
        public void handler(String data, CallBackFunction function) {
            Log.i(TAG, "handler = submitFromWeb, data from web = " + data);
            function.onCallBack("submitFromWeb exe, response data from Java");
        }
    });
// js 调用java注册的接口
    WebViewJavascriptBridge.callHandler(
        'submitFromWeb'
        , {'param': str1}
        , function(responseData) {
            document.getElementById("show").innerHTML = "send get responseData from java, data = " + responseData
        }
    );

//也可以用 defaultHandler
// java中 注册default
  webView.setDefaultHandler(new DefaultHandler());
//js中 通过defaultHandler
    window.WebViewJavascriptBridge.send(
        data
        , function(responseData) {
            document.getElementById("show").innerHTML = "repsonseData from java, data = " + responseData
        }
    );

//js注入一个方法 供java调用
    WebViewJavascriptBridge.registerHandler("functionInJs", function(data, responseCallback) {
        document.getElementById("show").innerHTML = ("data from Java: = " + data);
        var responseData = "Javascript Says Right back aka!";
        responseCallback(responseData);
    });
// java调用 js注入的方法
    webView.callHandler("functionInJs", new Gson().toJson(user), new CallBackFunction() {
        @Override
        public void onCallBack(String data) {

        }
    });

//js注册一个默认方法，来接受java层的信息
  bridge.init(function(message, responseCallback) {
        console.log('JS got a message', message);
        var data = {
            'Javascript Responds': 'Wee!'
        };
        console.log('JS responding with', data);
        responseCallback(data);
    });
// java层传递信息
  webView.send("hello");

注意：
	jsbridge 库会注册一个WebViewJavascriptBridge 对象到window ，在js中 使用WebViewJavascriptBridge对象前
    必须判断WebViewJavascriptBridge 是否存在，如果不存在，需要重新监听ready事件
	if(window.WebViewJavascriptBridge){
    	//do your work here
    }else {
    	document.addEventListener(
        'WebViewJavascriptBridgeReady'
        ,function(){
        //do your work here
        },
        false
        );
    }
        

遇到的坑

1. jsbridge调用无效

原因： 

给webview设置了 webviewClient ，jsbridge需要使用webviewClient对于url进行转发 

解决方案：

使用 BridgeWebviewClient 进行拓展

webView.setWebViewClient(new BridgeWebViewClient(webView));

2. jsbridge java层面回调无效

       mWebView.registerHandler("callMethod", (data, function) -> {
            function.onCallBack("this is callback message"); //这里无效 h5收不到
        });

分析原因：

realeas 1.0.4 构建的不是最新的代码

解决方案：

fork jsbridge分支 打最新包解决问题 （发现当前最新commit 构建失败，使用2018年10月29日 commit aca02b46 进行构建成功） ，使用ok

 

3. 使用jsbridge 无故调用两次

使用最新的 aca02b46  构建的包，出现 h5调用 java注册方法后，当路由发生变化时，会无端调用之前调用过的方法，或者调用两次。重新切换到老的构建版本 1.0.4 并未发现此类情况

查看2018年1月前后 发信啊一个 lost message 修复bug 引入 bizMessagingIframe ，但与之前的messagingIframe 并无区别

修改  _fetchQueue 方法总 bizMessagingIframe 为 messagingIframe  ，相当于使用该commit之前的代码 ，重新构建允许

bug修复，路由切换 调用正常

解决方案

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
        if (messageQueueString !== '[]') {
 
//            bizMessagingIframe.src = CUSTOM_PROTOCOL_SCHEME + '://return/_fetchQueue/' + encodeURIComponent(messageQueueString);
            messagingIframe.src = CUSTOM_PROTOCOL_SCHEME + '://return/_fetchQueue/' + encodeURIComponent(messageQueueString);
        }
    }

个人fork后的 release 

implementation 'com.github.caixingcun:JsBridge:2.1.3'