JSbridge系列解析（二）:lzyzsd/JsBridge使用方法

JSBrige系列直通车，由浅入深理解JS-Native的通信过程：
JSbridge系列解析（一）:JS-Native调用方法
JSbridge系列解析（二）:lzyzsd/JsBridge使用方法
JSbridge系列解析（三）:lzyzsd/JsBridge源码解析
JSbridge系列解析（四）:Web端发消息给Native代码流程具体分析

关于JSBridge的开源库，业界使用最多的是：https://github.com/lzyzsd/JsBridge。 使用方法如下：

一、添加编译依赖

在应用的build.gradle文件中添加如下代码：

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

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

二、JS -> Native方法

可注册Java Handler方法，供JS调用

//Java注册方法示例，函数名submitFromWeb【java代码】
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调用注册方法submitFromWeb【JS代码】
WebViewJavascriptBridge.callHandler(
        'submitFromWeb'
        , {'param': str1}
        , function(responseData) {
            document.getElementById("show").innerHTML = "send get responseData from java, data = " + responseData
        }
    );

三、Native -> JS方法

可注册JS Handler方法，供java调用。注意callHandler方法需要在主线程中调用

//JS注册方法示例，方法名functionInJs【JS代码】
WebViewJavascriptBridge.registerHandler("functionInJs", function(data, responseCallback) {
        document.getElementById("show").innerHTML = ("data from Java: = " + data);
        var responseData = "Javascript Says Right back aka!";
        responseCallback(responseData);
});

//Java调用注册的方法functionInJs【Java代码】
webView.callHandler("functionInJs", new Gson().toJson(user), new CallBackFunction() {
        @Override
        public void onCallBack(String data) {

        }
});

四、JS初始化注意事项

JSBridge在运行中为window对象注入了WebViewJavascriptBridge对象，在使用前需要判断对象是否存在。如果WebViewJavascriptBridge对象不存在，则可以监听WebViewJavascriptBridgeReady 事件，代码示例如下：

if (window.WebViewJavascriptBridge) {
    //do your work here
} else {
    document.addEventListener(
            'WebViewJavascriptBridgeReady'
            , function() {
                //do your work here
            },
            false
    );
}

五、JS与JAVA调用默认Handler

JSBridge提供了默认方法供JS和JAVA相互调用，避免注册的步骤。

JAVA注册默认hander，在不使用assigned handlerName情况下，供js发送消息给java

//java代码。lib中提供DefaultHandler来处理接收到的js消息
webView.setDefaultHandler(new DefaultHandler());

//js代码
window.WebViewJavascriptBridge.send(
        data
        , function(responseData) {
            document.getElementById("show").innerHTML = "repsonseData from java, data = " + responseData
        }
);

JS调用初始化方法，设置默认handler，在不使用assigned handlerName情况下，供java发送消息给js

//JS代码
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代码，console将输出'JS got a message hello' and 'JS responding with'
webView.send("hello");

init方法在WebviewJavascriptBridge.js中实现，对应方法如下。该方法中初始化了WebViewJavascriptBridge._messageHandler，即默认的handler，该变量在下一章节将源码实现时出现在_dispatchMessageFromNative中。

    //set default messageHandler
    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]);
        }
    }