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

业务介绍

方法签名

方法参数

方法返回值

说明

获取通讯录单个数据

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"}"

})

效果图如下:

巴特西

bridge和原生交互的简单用法

最新文章

热门文章