vue和原生组件的交互jsBridge.js
jsBridge.js
let isAndroid = navigator.userAgent.indexOf('Android') > -1 || navigator.userAgent.indexOf('Adr') > -1;
let isiOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
//这是必须要写的,用来创建一些设置
function setupWebViewJavascriptBridge(callback) {
//Android使用
if (isAndroid) {
if (window.WebViewJavascriptBridge) {
callback(WebViewJavascriptBridge)
} else {
document.addEventListener(
'WebViewJavascriptBridgeReady',
function () {
callback(WebViewJavascriptBridge)
},
false
);
}
console.log('tag', '安卓')
sessionStorage.phoneType = 'android'
}
//iOS使用
if (isiOS) {
if (window.WKWebViewJavascriptBridge) {
return callback(WKWebViewJavascriptBridge);
}
if (window.WKWVJBCallbacks) {
return window.WKWVJBCallbacks.push(callback);
}
window.WKWVJBCallbacks = [callback];
window.webkit.messageHandlers.iOS_Native_InjectJavaScript.postMessage(null)
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)
})
})
}
}
vue代码:
main.js
import Bridge from './common/jsBridge.js'
Vue.prototype.$bridge=Bridge
组件调用:
created(){
this.openScanFun()
},
mounted(){
this.scanCodeFun()
},
methods:{
//扫码
openScanFun(){
let param={};
//调用原生的方法,callOnQRCodeAct:原生方法名
this.$bridge.callHandler('callOnQRCodeAct',null,res=>{
alert(res)
})
},
scanCodeFun(){
//原生调用js的方法,scanCodeReturnDataFun:js方法名
this.$bridge.registerHandler("scanCodeReturnDataFun", (data,responseCallback)=>{
alert(data);
})
}
}