H5与原生APP(android/ios)是如何交互的

场景描述：公司分别用Android和iOS开发的APP，嵌入同一个H5页面，需要做H5和APP之间的交互；APP通知H5可以通过URL链接传参的方式告知，但H5要通知APP呢，我们想到的是JS交互。

一、封装each.js并存放到common目录下

// 判断设备是android还是ios
export function getDevice() {// 判断H5页面环境是否在小程序的webview中 web-view会检测each.js中的https://__bridge_loaded__域名而报错if(/MicroMessenger/i.test(navigator.userAgent)) {// ios的ua中无miniProgram，很坑爹，但都有MicroMessenger（表示是微信浏览器）wx.miniProgram.getEnv((res)=>{if (res.miniprogram) {console.log("在小程序里");}})}else{console.log("不在小程序里");var u = navigator.userAgent;//android终端var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1;//ios终端var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);// 设备var device = {};if (isAndroid) {device.type = "Android";device.method = AndroidMethod();} else if (isIOS) {device.type = "IOS";device.method = IOSMethod();} else {device.type = "Unknown Device";}return device;}
}// 安卓方法
function AndroidMethod() {var method = {};// 跳转method.jumpTo = function (tag, url) {window.android.jumpTo(tag, url);};// 保存登录信息method.setLoginData = function (str) {window.android.setLoginData(str);};// 获取登录信息method.getLoginData = function (callBack) {var response = JSON.parse(window.android.getLoginData());callBack(response.userinfo);};// 获取流量统计method.getFlowStatistics = function (callBack) {var response = JSON.parse(window.android.getFlowStatistics());callBack(response);};// 获取tokenmethod.getToken = function () {window.android.getToken();};// 保存数据method.saveData = function (title, str) {window.android.saveData(title, JSON.stringify(str));};// 获取数据method.getData = function (title, callBack) {var response = window.android.getData(title);callBack(JSON.parse(response));};// 获取登录信息及代金券IDmethod.getLoginAndVochId = function (voucherEntranceData, callBack) {if (voucherEntranceData.entrance == 'app') {var response = JSON.parse(window.android.getLoginAndVochId());callBack(response);} else {var response = JSON.parse(window.android.getLoginData());response.voucher_id = voucherEntranceData.voucher_id;callBack(response);}};return method;
}// 苹果方法
function IOSMethod() {var method = {};// 跳转method.jumpTo = function (tag, url) {var o = {'tag': tag,'url': url};setupWebViewJavascriptBridge(function (bridge) {bridge.callHandler('jumpTo', o, function (response) {})});};// 保存登录信息method.setLoginData = function (str) {setupWebViewJavascriptBridge(function (bridge) {bridge.callHandler('setLoginData', str, function (response) {})});};// 获取登录信息method.getLoginData = function (callBack) {setupWebViewJavascriptBridge(function (bridge) {bridge.callHandler('getLoginData', function (response) {var responseObj = JSON.parse(response);callBack(responseObj.userinfo);})});};// 保存数据method.saveData = function (title, content) {var data = {'title': title,'content': content};setupWebViewJavascriptBridge(function (bridge) {bridge.callHandler('saveData', data, function (response) {})});};// 获取数据method.getData = function (title, callBack) {setupWebViewJavascriptBridge(function (bridge) {bridge.callHandler('getData', title, function (response) {callBack(response);})});};// 立即开始method.startnow = function (member_id, redId, taskType, taskId, termType, term, url) {var data = {'member_id': member_id,'redId': redId,"taskType": taskType,"taskId": taskId,"termType": termType,"term": term,"url": url,};setupWebViewJavascriptBridge(function (bridge) {bridge.callHandler('startnow', data, function (response) {})});};// 第二个按钮动作method.nextact = function (member_id, redId, taskType) {var data = {'member_id': member_id,'redId': redId,"taskType": taskType};setupWebViewJavascriptBridge(function (bridge) {bridge.callHandler('nextact', data, function (response) {})});};setupWebViewJavascriptBridge(function (bridge) {bridge.registerHandler('showButton', function (response) {showButton();})});setupWebViewJavascriptBridge(function (bridge) {bridge.registerHandler('showOverTimeButton', function (response) {showOverTimeButton(response)})});// 获取流量统计method.getFlowStatistics = function (callBack) {setupWebViewJavascriptBridge(function (bridge) {bridge.callHandler('getFlowStatistics', function (response) {var responseObj = JSON.parse(response);callBack(responseObj);})});};// 获取登录信息及代金券IDmethod.getLoginAndVochId = function (voucherEntranceData, callBack) {if (voucherEntranceData.entrance == 'app') {setupWebViewJavascriptBridge(function (bridge) {bridge.callHandler('getLoginAndVochId', function (response) {var responseObj = JSON.parse(response);callBack(responseObj);})});} else {setupWebViewJavascriptBridge(function (bridge) {bridge.callHandler('getLoginData', function (response) {var responseObj = JSON.parse(response);responseObj.voucher_id = voucherEntranceData.voucher_id;callBack(responseObj);})});}};/* 申明交互 */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 = 'https://__bridge_loaded__';document.documentElement.appendChild(WVJBIframe);setTimeout(function () {document.documentElement.removeChild(WVJBIframe)}, 0)}return method;
}

二、在main.js主入口中引入并抛出全局变量

import {getDevice} from './common/each.js'
Vue.prototype.getDevice = getDevice;

三、在需要通知APP的地方调用saveData方法

this.getDevice().method.saveData(title,value);    // 往app传入数据

weixin@zdkeep免费获取各种学习资料面试题及电子书籍，免费进群学习成长技术交流职位内推项目外包等。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！