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");

待续。。。

    原文作者:Wiggins_Y
    原文地址: https://www.jianshu.com/p/1dace377e434
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞