频道栏目
首页 > 程序开发 > 移动开发 > Android > 正文
H5页面与Android原生页面交互
2017-05-18 09:59:56      个评论    来源:zhengyongbo的博客  
收藏   我要投稿

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>
  • 123456789101112131415161718192021222324252627282930313233

  • 123456789101112131415161718192021222324252627282930313233

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

点击复制链接 与好友分享!回本站首页
上一篇:android ndk 开发jni调用对象方法,数组参数
下一篇:Android编程基础之消息处理机制的简单实现
相关文章
图文推荐

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站