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下載下傳