ios和安卓H5交互橋接

本文轉載自查看原文 2017-11-28 14:13 1294 JavaScript

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);
                        });
                    })

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 h5與安卓、ios交互 H5與APP(安卓及IOS)交互方法 H5與安卓、IOS的交互，判斷微信、移動設備、安卓、ios H5判斷是安卓還是ios訪問安卓Native和H5頁面進行交互 WebView 安卓原生java與h5，js交互 uni打包成h5在ios與安卓的問題反饋前端H5與安卓和ios之間通信 h5開發安卓ios坑總結 H5頁面js和ios 安卓互相調用