本文主要是涉及这样一个需求,公司的移动端项目比较多,但是不想安装过多的APP,于是所有项目以H5的形式开发,最后嵌入进APP的壳子中,继而只需要安装一个app; 那么这里边存在一个问题,h5与原生app如何进行交互呢?
原生app跳转进相应的H5界面,需要携带一些用户信息,本文主要是通过window.WebViewJavascriptBridge悄悄的进行数据交互。
本文主要站在h5的角度进行讲解:
第一步: 创建一个bridge.js文件,编写如下公共代码:
/* eslint-disable */
// 根据navigator.userAgent判断一下当前环境属于ios环境还是按住哦环境
let isAndroid =
navigator.userAgent.indexOf("Android") > -1 ||
navigator.userAgent.indexOf("Adr") > -1;
let isiOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
/** 针对安卓和ios系统,对window.WebViewJavascriptBridge进行兼容性处理 */
//这是必须要写的,用来创建一些设置
function setupWebViewJavascriptBridge(callback) {
//Android使用
if (isAndroid) {
if (window.WebViewJavascriptBridge) {
callback(WebViewJavascriptBridge);
} else {
//添加dom事件
document.addEventListener(
"WebViewJavascriptBridgeReady",
function() {
callback(WebViewJavascriptBridge);
},
false
);
}
sessionStorage.phoneType = "android";
}
//iOS使用
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);
sessionStorage.phoneType = "ios";
}
}
//注册回调函数,第一次连接时调用 初始化函数(android需要初始化,ios不用)
setupWebViewJavascriptBridge(function(bridge) {
if (isAndroid) {
//初始化
bridge.init(function(message, responseCallback) {
var data = {
"Javascript Responds": "Wee!"
};
responseCallback(data);
});
}
});
export default {
// js调APP方法 (参数分别为:app提供的方法名 传给app的数据 回调)
callHandler(name, data, callback) {
setupWebViewJavascriptBridge(function(bridge) {
bridge.callHandler(name, data, callback);
});
},
// APP调js方法 (参数分别为:js提供的方法名 回调)
registerHandler(name, callback) {
setupWebViewJavascriptBridge(function(bridge) {
bridge.registerHandler(name, function(data, responseCallback) {
callback(data, responseCallback);
});
});
}
};
第二步: 全局注册bridge
在main.js中
import Bridge from '@/utils/bridge'
Vue.prototype.$bridge = Bridge
第三步: 去相应h5项目中的界面中开始交互
// 设置用信息
this.$bridge.callHandler("sendUserInfo", JSON.stringify(temp), () => {})
// 获取用户信息
this.$bridge.callHandler("getUserInfo","", res =>{
const temp = JSON.parse(res)
}
})
// 切换系统的方法(多个h5项目在原生app的壳子中进行切换)
changeSys(){
var temp={
flag:'1',
system:'MTS'
}
this.$bridge.callHandler("changeSys",JSON.stringify(temp),()=>{})
},