Android JSBridge实现Java与H5交互详细使用

前情：

Android控件WebView的自带的JavascriptInterface的接口，可以简单实现Java与js的交互，但是局限性很大。所以就出现了第三方库JSBridge。JSBridge实现了Java与javascript之间数据互通，Java调用js代码，js调用Java代码。

集成JSBridge库

可以查看该库的GitHub简述

集成方法两种：

1. 在bulid.gradle中添加如下代码

repositories {  
        maven {url "https://jitpack.io"}  
    }  
    dependencies {  
        compile 'com.github.lzyzsd:jsbridge:1.0.4'
    }
           

1. 直接导入JSBridge的library包即可，从https://github.com/lzyzsd/JsBridge下载导入项目中的library

JSBridge使用

1. javascript调用java，实现数据互通

**js代码** 

 window.WebViewJavascriptBridge.callHandler(
                'Javajs'
                , {'param': '中文测试'}
                , function(responseData) {
                    document.getElementById("show").innerHTML = "得到来自Java回传的数据, data = " + responseData
                }
            );
           

**Java代码**

 /**
         * Html点击事件利用JS function方法调Android端并相互传值。
         * bridgeWebView调用registerHandler实现Java与js互传数据
         * "Javajs"是Java与js交互的handlerName，必须保持一致
         */
        bridgeWebView.registerHandler("Javajs", new BridgeHandler() {
            @Override
            public void handler(String data, CallBackFunction function) {
                //data是JavaScript返回的数据
                Log.i(TAG, "得到JS传过来的数据 " + data);
                //java返回给js的数据
                function.onCallBack("Java数据");
            }
        });
           

2.java调用javascript代码，实现数据互通

**Java代码**

 /**
                 * Android点击事件调用JS方法并相互传值。
                 * Java 调JS的functionJs方法并得到返回值
                 */

                bridgeWebView.callHandler("functionInJs", "来自Java数据", new CallBackFunction() {
                    @Override
                    public void onCallBack(String data) {
                        Log.i(TAG,  data);
                    }
           

**javascript代码**

 bridge.registerHandler("functionInJs", function(data, responseCallback) {
                document.getElementById("show").innerHTML = ("data from Java: = " + data);
                if (responseCallback) {
                    var responseData = "来自javascript数据";
                    responseCallback(responseData);
                }
            });
           

3.Java设置默认方式，接收js数据，不回传数据给js

**java代码**

       /**
         * You can set a default handler in Java, so that js can send message to Java without assigned handlerName
         * DefaultHandler默认的方式，设置默认方式的话，js发送数据给Java不需要设置handlerName
         * 默认方式有两种
         * 1。DefaultHandler默认的方式
         * 2。自定义实现
         */
        //DefaultHandler默认的方式
        bridgeWebView.setDefaultHandler(new DefaultHandler());
        //自定义实现
        bridgeWebView.setDefaultHandler(new BridgeHandler() {
            @Override
            public void handler(String data, CallBackFunction function) {
                Log.i(TAG, "得到JS传过来的数据 " + data);
            }
        });
           

**javascript代码**

    //send message to native
            var data = {id: , content: "这是一个图片 <img src=\"a.png\"/> test\r\nhahaha"};
            window.WebViewJavascriptBridge.send(
                data
                , function(responseData) {
                    document.getElementById("show").innerHTML = "发消息给java, data = " + responseData
                }
            );
           

4.javascript设置默认方式，接收Java数据，不回传数据给java

java代码

**Java 代码**

bridgeWebView.send("无返回值");
           

**javascript代码**

  connectWebViewJavascriptBridge(function(bridge) {
            bridge.init(function(message, responseCallback) {
                console.log('JS got a message', message);
                var data = {
                    'Javascript Responds': '测试中文!'
                };

                if (responseCallback) {
                    console.log('JS responding with', data);
                    responseCallback(data);
                }
            });
           

demo下载