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(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) }) }) } }
可以将JSBridge注册为全局使用,也可以单个页面引入使用
全局使用方法
import Bridge from './utils/JSbridge.js' Vue.prototype.$bridge = Bridge
调用的方法名与APP开发人员沟通好,
mounted () { // 注册事件 this.appCall() }, methods: { // js调用app ================================== callAPP () { let param = {} // JS给APP传得参数 this.$bridge.callHandler('JSCallApp', param, (res) => { alert('获取app响应数据:' + res) }) }, // app调js ===================================== // app调用js的方法 appCallJS, 需要注册 appCall () { this.$bridge.registerHandler('appCallJS', (datas, responseCallback) => { alert('showStationList' + datas) }) } }