安卓與js互調

安卓與js互調

標籤（空格分隔）： 安卓js互調

---

當下越來越多的app使用native代碼調用js代碼，或者js代碼調用native代碼，寫一份代碼，多個端都可以調用，雖然沒有原生的流暢，但是不得不說這是其中一個趨勢
下面就說說怎麼實現，
首先安卓端需要依賴下面的庫

強烈建議這個引用.

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

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

在java中使用

在layout中用此庫中的jsbridge.BridgeWebView代替原生的webview

註冊一個handler讓js調用

java中普通註冊

//第一個參數爲名稱
    webView.registerHandler("submitFromWeb", new BridgeHandler() {
        @Override
        public void handler(String data, CallBackFunction function) {
            Log.i(TAG, "handler = submitFromWeb, data from web = " + data);
            //同時,通過這個回調中的function對象,可以在此處調用到js中的方法,如下
            function.onCallBack("submitFromWeb exe, response data from Java");
        }
    });

js中只需要用這個方法就可以調用到java中註冊的handler

    WebViewJavascriptBridge.callHandler(
        'submitFromWeb'//注意這個名稱,必須跟java中的名稱相同,否則不能調用
        , {'param': str1}
        , function(responseData) {
            document.getElementById("show").innerHTML = "send get responseData from java, data = " + responseData
        }
    );

java中可以設置一個默認的handler,這樣js發送消息給java時就不用指定handler的名字了,如下

java默認註冊

    webView.setDefaultHandler(new DefaultHandler(){
            @Override
            public void handler(String data, CallBackFunction function) {
                Toast.makeText(getApplication(), data, LENGTH_SHORT).show();
                function.onCallBack("我來自安卓,回覆js的默認消息");
            }
        });
    //這裏最好有實現的方法,纔好處理js中調用時發送過來的信息

js默認調用

    //不用指定handler名字,直接send方法就可以調用到默認的handler了,就是說send就是callHandler方法的一個簡化版,只是省略掉了名稱而已
    window.WebViewJavascriptBridge.send(
        data
        , function(responseData) {
            document.getElementById("show").innerHTML = "repsonseData from java, data = " + responseData
        }
    );

上面是java中註冊,讓js調用,現在我們js中註冊一個handler讓java調用

js註冊方法

//還是同樣的方法,同樣的套路,學習安卓的童鞋們看看就行了,不用關心
    WebViewJavascriptBridge.registerHandler("functionInJs", function(data, responseCallback) {
        document.getElementById("show").innerHTML = ("data from Java: = " + data);
        var responseData = "Javascript Says Right back aka!";
        //當然這個responseCallback就是我們java中的CallBackFunction,這裏也同樣的,雖然是js中註冊讓java調用,但是通過這個東西,可以再次調用到java中的東西
        responseCallback(responseData);
    });

java中通過callHandler方法調用js中註冊的handler

java調用js,要指定名稱,而且第二個參數爲json類型

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

        }
    });

js中可以用init方法,這樣java調用send方法時,就不用指定名稱,這個init方法中提供了處理方式.同樣的道理

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默認調用js

    webView.send("hello");

注意

這個庫將注入一個WebViewJavascriptBridge對象到window對象中,因此在js中,在使用WebViewJavascriptBridge之前,你需要檢查一下WebViewJavascriptBridge是否存在,如果不存在,你可以添加一個監聽,如下

    if (window.WebViewJavascriptBridge) {
        //do your work here
    } else {
        document.addEventListener(
            'WebViewJavascriptBridgeReady'
            , function() {
                //do your work here
            },
            false
        );
    }

從另一個角度來看：

安卓端調用js需要：
    js端註冊,安卓端調用
    js端默認註冊,安卓端默認調用
js調用工安卓端:
    安卓端註冊,js端調用
    安卓端默認註冊,js端默認調用

霸氣的WebChromeClient

這裏只是讓安卓響應js的打開文件選擇器,另外還有其他的功能,http://www.jianshu.com/p/2857d55e2f6e 這裏有更多的用法

webView.setWebChromeClient(new WebChromeClient() {
            @Override
            public boolean onShowFileChooser(WebView webView, ValueCallback<Uri[]> filePathCallback, FileChooserParams fileChooserParams) {
                pickFile();
                mUploadMessage =  filePathCallback;
                return true;
            }
        });