H5页面与Android原生页面交互

其中 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传过来的参数。我们可以进行处理。