Vue使用JSBridge與原生APP通信

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)
      })
    }
  }