vue项目通过JSBrideg与原生APP通信
2022-03-22 本文已影响0人
清风昙
JSBrideg.js
const isAndroid = navigator.userAgent.indexOf('Android') > -1 || navigator.userAgent.indexOf('Adr') > -1
const isiOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
// 这是必须要写的,用来创建一些设置
function setupWebViewJavascriptBridge(callback) {
// Android使用
if (isAndroid) {
if (window.WebViewJavascriptBridge) {
callback(window.WebViewJavascriptBridge)
} else {
document.addEventListener(
'WebViewJavascriptBridgeReady',
() => {
callback(window.WebViewJavascriptBridge)
},
false
)
}
sessionStorage.phoneType = 'android'
}
// iOS使用
if (isiOS) {
if (window.WebViewJavascriptBridge) {
return callback(window.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(() => {
document.documentElement.removeChild(WVJBIframe)
}, 0)
sessionStorage.phoneType = 'ios'
}
}
// 注册回调函数,第一次连接时调用 初始化函数(android需要初始化,ios不用)
setupWebViewJavascriptBridge((bridge) => {
if (isAndroid) {
// 初始化
bridge.init((message, responseCallback) => {
var data = {
'Javascript Responds': 'Wee!'
}
responseCallback(data)
})
}
})
export default {
// js调APP方法 (参数分别为:app提供的方法名 传给app的数据 回调)
callHandler(name, data, callback) {
setupWebViewJavascriptBridge((bridge) => {
bridge.callHandler(name, data, callback)
})
},
// APP调js方法 (参数分别为:js提供的方法名 回调)
registerHandler(name, callback) {
setupWebViewJavascriptBridge((bridge) => {
bridge.registerHandler(name, (data, responseCallback) => {
callback(data, responseCallback)
})
})
}
}
使用可以注册为全局调用,也可以单页面引入,下面以全局引入为例:
在main.js文件添加:
import Bridge from './utils/jsbridge.js'
Vue.prototype.$bridge = Bridge
vue页面引用:
mounted() {
// 注册时间
this.appCall()
}
methods: {
// js调用app
callAPP() {
// JS给APP传得参数
const param = {
taskId: '123456',
boltNoList: [1, 2, 3]
}
this.$bridge.callHandler('beginInstall', param, res => {
this.msg = `获取app响应数据:${res}`
console.log(`获取app响应数据:${res}`)
})
},
// app调用js的方法 appCallJS, 需要注册
appCall() {
this.$bridge.registerHandler('onInstalling', (datas, responseCallback) => {
this.msg = `app获取js数据:${datas}`
console.log(`app获取js数据:${datas}`)
// console.log(`responseCallback:${responseCallback}`)
})
}
}