bridge和原生交互的简单用法
16lz
2021-01-23
首先获取当前环境是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"}"})
效果图如下:
更多相关文章
- 开机引导程序只执行一次的方法
- Android MediaPlayer 常用方法介绍
- Android 自定义组件 方法篇
- android中HttpURLConnection调用getResponseCode()时崩溃 解决方
- Android自学笔记(Android x86模拟器Intel Atom x86 System Image
- android Button组件的属性和方法
- Android 中数据库查询方法 query() 中的 select
- Android空引用问题的解决方法——on a null object reference
- Android发送短信方法实例详解