ios和安卓H5交互桥接

ios交互

demo1(摘自网络)

 1 <!doctype html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0">
 6         <style>
 7             body{
 8                 background-color:paleturquoise;
 9             }
10 
11             button{
12                 border:0;
13                 width: 150px;
14                 height: 35px;
15                 background-color: orangered;
16                 color: white;
17                 font-size: 16px;
18                 border-radius: 6px;
19             }
20         </style>
21     </head>
22     
23     <body>
24         <h2>JS调用OC中的方法</h2>
25         <button id="btn">访问OC相册</button>
26         <button id="btn1">调用OC提示窗</button>
27         <p></p>
28     </body>
29     <script>
30        // 这段代码是固定的，必须要放到js中
31        function setupWebViewJavascriptBridge(callback) {
32             if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
33             if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
34             window.WVJBCallbacks = [callback];
35             var WVJBIframe = document.createElement('iframe');
36             WVJBIframe.style.display = 'none';
37             WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
38             document.documentElement.appendChild(WVJBIframe);
39             setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
40         }
41     
42         // 与OC交互的所有JS方法都要在这里注册,才能让OC和JS之间相互调用
43        setupWebViewJavascriptBridge(function(bridge) {
44 
45            /* JS给OC提供公开的API, 在OC中可以手动调用此API, 并且可以接收OC中传过来的参数,同时可回调OC */
46 
47            // 获取用户信息
48            bridge.registerHandler('getUserInfo', function(data, responseCallback) {
49                console.log("OC中传递过来的参数:", data);
50                // 把处理好的结果返回给OC
51                responseCallback({"userID":"DX001", "userName":"旋之华", "age":"18", "otherName":"旋之华"})
52            });
53 
54            //  弹框输出（这里的数据是ios端返回的值）
55            bridge.registerHandler('alertMessage', function(data, responseCallback) {
56                alert(data);
57            });
58 
59            //  动态跳转到京东商城
60            bridge.registerHandler('pushToNewWebSite', function(data, responseCallback) {
61                window.location.href = data.url;
62            });
63 
64            bridge.registerHandler('insertImgToWebPage', function(data, responseCallback) {
65 
66                 var img = document.createElement('img');
67                 img.src = data.url;
68                 img.width = 200;
69                 document.body.appendChild(img);
70 
71            });
72 
73 
74            /* OC给JS提供公开的API, 在JS中可以手动调用此API, 并且可以接收OC中传过来的参数,同时可回调OC */
75                                     
76            // 调用OC中的打开相册方法（传数据给ios）
77            document.getElementById('btn').onclick = function () {
78                bridge.callHandler('openCamera', {'count':'10张'}, function responseCallback(responseData) {
79                    console.log("OC中返回的参数:", responseData)
80                });
81            };
82 
83            document.getElementById('btn1').onclick = function () {
84                bridge.callHandler('showSheet', '', function responseCallback(responseData) {
85                    console.log("OC中返回的参数:", responseData)
86                });
87            };
88        })
89     </script>
90 </html>

demo2

    //**********************
    /*苹果设备回调*/
    //注册WebViewJavascriptBridge
    // 这段代码是固定的，必须要放到js中
    function setupWebViewJavascriptBridge(callback) {
        if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
        if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
        window.WVJBCallbacks = [callback];
        var WVJBIframe = document.createElement('iframe');
        WVJBIframe.style.display = 'none';
        WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
        document.documentElement.appendChild(WVJBIframe);
        setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
    }
    function testClick1(code,msg,page) {
        //JS代码
        // 与OC交互的所有JS方法都要在这里注册,才能让OC和JS之间相互调用
        setupWebViewJavascriptBridge(function(bridge) {
            //  弹框输出（获得返回的数据）
            bridge.registerHandler('alertMessage', function(data, responseCallback) {
                if(data.code==0){
                    $('.tip').html('<span class="gr">注册成功，3秒后自动跳转</span>');
                    $('.register').unbind('click');
                    setTimeout(function(){
                        window.location.href='/Login/index.html';
                    },3000);
                }else{
                    $('.tip').html('<span class="re">'+data.tishi+'</span>');
                }
            });
            //JS换行
            //获得Button
            /*苹果方法调用传递数据*/（传递数据给ios）
            //JS代码调用OC"mpTestObjcCallBack"的Handler,并传递参数{'foo': 'bar'} 如果有回调还会显示出来
            bridge.callHandler('mpTestObjcCallBack',{code:code,msg:msg,page:page}, function(response) {
                console.log('JS获得OC返回的结果：', response);
//                alert(data);
            });
        });
    }

demo2调用

1                     var maincode='0',
2                         host = window.location.host,
3                         mainmsg = {url:'http://'+host,phone:phone,type:1,pwd:pwd,yzm:yzm},
4                         page = 'register';//页面名称
5                     testClick1(maincode,mainmsg,page);

安卓交互

参考自

https://github.com/lzyzsd/JsBridge

调用java方法实行

                          var maincode='0',
                        host = window.location.host,
                        mainmsg = {url:'http://'+host,phone:phone,type:2,pwd:pwd,yzm:yzm},
                        page = 'register';//页面名称
                    testClick(maincode,mainmsg,page);             
 /*安卓回调app设备(发消息给安卓)*/
                    function testClick(code,msg,page) {
                        var data = {code:code,msg:msg,page:page};
                        window.WebViewJavascriptBridge.send(
                            data
                            , function(responseData) {
                                document.getElementById("show").innerHTML = "repsonseData from java, data = " + responseData
                            }
                        );
                    }
                    //安卓发消息给h5，方法注册
                    function connectWebViewJavascriptBridge(callback) {
                        if (window.WebViewJavascriptBridge) {
                            callback(WebViewJavascriptBridge)
                        } else {
                            document.addEventListener(
                                'WebViewJavascriptBridgeReady'
                                , function() {
                                    callback(WebViewJavascriptBridge)
                                },
                                false
                            );
                        }
                    }
                    connectWebViewJavascriptBridge(function(bridge) {
                        /*安卓方调用方法*/
                        bridge.registerHandler("functionInJs", function(data, responseCallback) {
                            alert(data);
                            var responseData = "Javascript Says Right back aka!";
                            responseCallback(responseData);
                        });
                    })

相关阅读:
Java的HttpServletRequest
Java的用户登录计数功能
 JAVA-DATE
正则表达式
 Java-JDBC（2）
Java-JDBC（1）
String类
 java的多态和构造方法
 Java的封装 this关键字继承
 java抽象类与接口
原文地址：https://www.cnblogs.com/NB-JDzhou/p/7909669.html