bridge和原生交互的簡單用法

首先獲取當前環境是ios還是Android 

 var u = navigator.userAgent;
    var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android終端
    var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios終端

對ios和Android 不同環境下做處理

  modal.setupWebViewJavascriptBridge = function (callback) {
        if (isAndroid) {
            if (window.WebViewJavascriptBridge) {
                callback(WebViewJavascriptBridge)
            } else {
                document.addEventListener('WebViewJavascriptBridgeReady', function (event) {
                    if (window.onWebViewJavascriptBridgeReady) window.onWebViewJavascriptBridgeReady(window.__bridge = WebViewJavascriptBridge);
                    callback(WebViewJavascriptBridge)

                }, false)
            }
        }

        if (isiOS) {
            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)
        }

    }

 

交互處理

// js調用APP端的方法
    modal.callhandler = function (name, data, callback) {
        modal.setupWebViewJavascriptBridge(function (bridge) {
            bridge.callHandler(name, data, callback)
        })
    }
    // js端注冊方法,給APP調用
    modal.registerhandler = function (name, callback) {
        modal.setupWebViewJavascriptBridge(function (bridge) {
            bridge.registerHandler(name, function (data) {
                callback(data)
            })
        })
    }
    modal.init = function (callback) {
        modal.setupWebViewJavascriptBridge(function (bridge) {
            bridge.init(function (data) {
                callback(data)
            })
        })
    }

 

 

需求:
H5調用APP的方法打開手機通訊錄面板,然后APP調用H5注冊的方法將用戶選擇的手機號碼通過回調給到H5:

交互:APP和H5相互定義好方法名字,以及需要的參數,返回的方法,下面是交互文檔,APP端注冊的名字叫做:"useSystemAddressBookUI",H5注冊的方法名字叫做:"getSingleContactData";

 

1、js調用Native 

業務介紹	方法簽名	方法參數	方法返回值	說明
調用系統通訊錄面板	useSystemAddressBookUI	無	無	無

 

 

 

2、Native調用js

業務介紹	方法簽名	方法參數	方法返回值	說明
獲取通訊錄單個數據	getSingleContactData	json字符串 格式如下： "{name:"zhangsan",phone:"15117988888"}"	無	通訊錄為空是json字符串為空"" 交互框架使用： WebViewJavascriptBridge

 

 

 

 

 

前端使用:

// 點擊按鈕打開通訊錄面板useSystemAddressBookUI方法由APP端提供
$('.user-mobile-icon').on('click',function(){
     bridgeSelf.callhandler('useSystemAddressBookUI','', function(data){  })
 })


// H5注冊getSingleContactData方法,APP調用,用戶選擇手機號后,會的到當前選擇的手機號碼
bridgeSelf.registerhandler('getSingleContactData', function(data){
  alert(data); //"{name:"zhangsan",phone:"15117988888"}"
})

 

效果圖如下:

​