Android与JS交互之JSBridge使用

一、引言

android与js交互的基本方式（https://www.jianshu.com/p/28c3dc325b5d）可以满足简单的交互需求，但是对于比较复杂的业务场景，比如Hybrid，这种方式就显得难以维护，基于JavascriptInterface 封装的WebViewJavascriptBridge框架，很好的解决了这一问题。

二、JSBridge引入

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

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

三、代码实现

1，注册一个Java handler 方法 ，可以给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 handler 的 "submitFromWeb"方法， 通过:

    WebViewJavascriptBridge.callHandler(
        'submitFromWeb'
        , {'param': str1}
        , function(responseData) {
            document.getElementById("show").innerHTML = "send get responseData from java, data = " + responseData
        }
    );

JAVA也可以设置一个默认handler, 这样的话 js 发送 message给 Java 不需要指定 handlerName

    webView.setDefaultHandler(new DefaultHandler());

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

2、注册一个 JavaScript handler方法 给 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能够调用这个 "functionInJs"方法 ，通过:

    webView.callHandler("functionInJs", new Gson().toJson(user), new CallBackFunction() {
        @Override
        public void onCallBack(String data) {

        }
    });

同样，你也可以定义默认的handler初始化方法, 这样Java 能发送message 给 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代码：

    webView.send("hello");

待续。。。