Android之利用JSBridge庫實現Html，JavaScript與Android的所有交互

java 和 js互通框架 WebViewJavascriptBridge是移動UIView和Html交互通信的橋梁，用作者的話來說就是實現java和js的互相調用的橋梁。

替代了WebView的自帶的JavascriptInterface的接口，使得我們的開發更加靈活和安全。

本博客把JSBridge庫近所有Android與（HTML+JS）的交互的方式全部實現，代碼詳細，注釋清除，希望對各位有所幫助。

效果如下圖：

　　　　　　

開發前的准備：（兩種方式選擇，選一種即可）

　　　方式1：直接導入JSBridge的library包即可,  AndroidStudio導library包請看博客：AndroidStudio怎樣導入library項目開源庫

　　　　　　  library包點擊下載

 

　　  方式2：引入庫，在bulid.gradle中添加如下代碼

              

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

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

 

1：默認方式（兩種（1：DefaultHandler默認的方式）；2：自定類實現）

//展示第一種
bridgeWebView.setDefaultHandler(new DefaultHandler());

//data是JavaScript返回的數據
private void setHandler(){

        bridgeWebView.setDefaultHandler(new BridgeHandler() {
            @Override
            public void handler(String data, CallBackFunction function) {
                Toast.makeText(MainActivity.this,"DefaultHandler默認："+data,Toast.LENGTH_LONG).show();
            }
        });
   }

 

JS

connectWebViewJavascriptBridge(function(bridge) {
            bridge.init(function(message, responseCallback) {
                console.log('JS got a message', message);
                var data = {
                    'json': 'JS返回任意數據!'
                };
                console.log('JS responding with', data);/*打印信息*/
                 document.getElementById("init").innerHTML = "data = " + message;
                responseCallback(data);
            });

 

2：Html點擊事件利用JS function方法調Android端並相互傳值。

function testClick() {
            var str1 = document.getElementById("text1").value;
            var str2 = document.getElementById("text2").value;

            window.WebViewJavascriptBridge.callHandler(
                'submitFromWeb'
                , {'Data': 'json數據傳給Android端'}  //該類型是任意類型
                , function(responseData) {
                    document.getElementById("show").innerHTML = "得到Java傳過來的數據 data = " + responseData
                }
            );
        }

 

Android.Java

 //注冊submitFromWeb方法
        bridgeWebView.registerHandler("submitFromWeb", new BridgeHandler() {
            @Override
            public void handler(String data, CallBackFunction function) {
                Log.i(TAG,"得到JS傳過來的數據 data ="+data);
                show(data);
                function.onCallBack("傳遞數據給JS");
            }
        });

 

3：Android點擊事件調用JS方法並相互傳值。

 @Override
    public void onClick(View v) {
        //Java 調JS的functionJs方法並得到返回值
        bridgeWebView.callHandler("functionJs", "Android", new CallBackFunction() {
            @Override
            public void onCallBack(String data) {
                // TODO Auto-generated method stub
               show(data);
            }

        });
    }

 

JS.js

 bridge.registerHandler("functionJs", function(data, responseCallback) {
                document.getElementById("show").innerHTML = ("Android端: = " + data);
                var responseData = "Javascript 數據";
                responseCallback(responseData);//回調返回給Android端
            });

 

send方式（包含又返回值和無返回值兩種）

無返回值：

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

function testClick() {
            var str1 = document.getElementById("text1").value;
            var str2 = document.getElementById("text2").value;
            //將Android端得到的數據在網頁上顯示，並其他數據傳給Android端，  可用於初始化和點擊操作
            var data = {id: 1, content: "我是內容哦"};
            window.WebViewJavascriptBridge.send(
                data
                , function(responseData) {
                    document.getElementById("show").innerHTML = "data = " + responseData
                }
            );
       }

 

其他方式，如 文件；

 

代碼稍微有點多，就不一一展示了，直接下載即可

 

源碼點擊下載