Android頁面內巢狀h5頁面已經是隨處可見了。在Android原生頁面和h5頁面的取捨上那些不是本文的重點。重點是，如此多的頁面用網頁來寫，那麼必定涉及到網頁與原生的互動，俗稱js互動。

目標：h5頁面點選按鈕Android端接收到網頁傳給的json資料。

實現

網頁端
網頁端新增如下內容

<script type="text/javascript">

 var hasBridge = false


    function connectWebViewJavascriptBridge(callback) {
            if (window.WebViewJavascriptBridge) {
                callback(WebViewJavascriptBridge)
            } else
 
 {
                document.addEventListener('WebViewJavascriptBridgeReady', function () {
                    callback(WebViewJavascriptBridge)
                }, false)
            }
        }

        connectWebViewJavascriptBridge(function (bridge) {
            bridge.init(function (message, responseCallback)
 
 {
                hasBridge = true
                var data = {'Javascript Responds': 'Wee!'}
                $("#document .disabled").removeClass("disabled")
                responseCallback(data)

            })

            $("#mzy").click(function(){
                var sendObj = {"type":"user"
 
}；
                sendObj["phone"] = "18067976937";
                sendObj["nick"] = "maoamao";
                bridge.send(JSON.stringify(sendObj), function (responseData) {
                });
            })
        })
</script>

其中 mzy 是定義的一個id = “mzy”的按鈕。傳遞的json資料為

{
    "type":"user",
    "phone":"18067976937",
    "nick":"maoamao",
}

Android端
Android端這裡使用的github上開元專案BridgeWebView來顯示h5頁面。使用如下：

 webview.setWebViewClient(new BridgeWebViewClient(webview) {

            @Override
            public void onPageStarted(WebView view, String url, Bitmap favicon) {
                super.onPageStarted(view, url, favicon);
            }

            @Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);
            }

            @Override
            public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {
                super.onReceivedError(view, errorCode, description, failingUrl);
                view.loadData(errorHtml, "text/html; charset=UTF-8", null);

            }
        });
        //JS互動
        webview.setDefaultHandler(new DefaultHandler() {
            @Override
            public void handler(String data, CallBackFunction function) {
                super.handler(data, function);
                Log.e("data", "data = " + data);
                try {
                    Gson gson = new GsonBuilder()
                            .setFieldNamingPolicy(FieldNamingPolicy.LOWER_CASE_WITH_UNDERSCORES)
                            .setDateFormat("yyyy-MM-dd'T'HH:mm:ss").create();
                    JSONObject jsonObject = new JSONObject(data);
                    String type = jsonObject.getString("type");
                    if (null != type && type.equals("user")) {
                        String nick = jsonObject.getString("nick");
                        Log.i("nick","nick = "+nick);
                    } else if (null != type && type.equals("XXXXXX")) {
                        xxxxxxxx;
                    }

                } catch (JSONException e) {
                    e.printStackTrace();
                }
            }
        });

        webview.loadUrl("XXXXXXXXXX");

        webview.send("hello-javascript");

這裡根據因為同一個頁面可能會有多種不同的互動需求，所以這裡用type來區分不同的互動型別。這裡可以根據jsonObject.getString(“nick”)獲取到nick欄位。 webview.loadUrl(“XXXXXXXXXX”);設定成你自己的h5頁面地址即可。

目標二：Android端傳遞引數給web頁

上面程式碼塊裡面最後一句webview.send(“hello-javascript”);就是Android端傳送了一個”hello-javascript”字串給web頁。

web頁接收Android發來的引數

<script>
    function connectWebViewJavascriptBridge(callback) {
        if (window.WebViewJavascriptBridge) {
            callback(WebViewJavascriptBridge)
        } else {      
        document.addEventListener('WebViewJavascriptBridgeReady', function(){
                callback(WebViewJavascriptBridge)
            }, false)
        }
    }
    connectWebViewJavascriptBridge(function (bridge) {
        bridge.init(function (message, responseCallback) {
            alert("message"+message)
            var data = {'Javascript Responds': 'Wee!'}
            new Vue({
                el: "#vue-app",
                template: "#app-template",
                data:{
                    tab: 1,
                },

                events: {
                    'bridgeEvt': function(obj) {
                        bridge.send(JSON.stringify(obj),function(responseData){
                            console.log(responseData);
                        })
                    }
                },
                ready: function(){
                    if(/notice_type=2/.test(location.href)) {
                        this.tab = 2
                    }
                },

            });
            responseCallback(data)
        })

    })
</script>

其中alert(“message”+message)message就是從Android傳過來的引數。我們可以進行處理。