vue项目与原生app开发之间的交互

web与app之间目前我只知道两种交互 一种是比较简单的就是app拦截h5页面上的跳转来做交互，或者是根据url给web传参数；
另一种就是现在要讲的可以通过第三方库来实现，我的项目用的是 WebViewJavascriptBridge。
1.在自己的项目中src创建 bridge.js 文件，用于封装 WebViewJavascriptBridge

function setupWebViewJavascriptBridge(callback) {
  if (window.WebViewJavascriptBridge) {
    return callback(window.WebViewJavascriptBridge)
  }
  if (window.WVJBCallbacks) {
    return window.WVJBCallbacks.push(callback)
  }
  window.WVJBCallbacks = [callback]
  let WVJBIframe = document.createElement('iframe');
  WVJBIframe.style.display = 'none'
  WVJBIframe.src = 'https://__bridge_loaded__'
  document.documentElement.appendChild(WVJBIframe);
  setTimeout(() => {
    document.documentElement.removeChild(WVJBIframe)
  }, 0)
}

export default {
  callhandler(name, data, callback) {
    setupWebViewJavascriptBridge(function (bridge) {
      bridge.callHandler(name, data, callback)
    })
  }, registerhandler(name, callback) {
    setupWebViewJavascriptBridge(function (bridge) {
      bridge.registerHandler(name, function (data, responseCallback) {
        callback(data, responseCallback)
      })
    })
  }
}

2，在 main.js 中引入该文件

import Bridge from '**/**/bridge.js'
Vue.prototype.$bridge = Bridge

3，然后调取你想要的方法，也就是安卓或则IOS给你写的方法（事先需要与客户端同事约定好方法名）

Callhandler () {
      var params = {
          name:'aaa'
      }
      this.$bridge.callhandler('test', params, (data) => {
        // 处理返回数据
      })
    },

4，安卓或IOS调你的JS方法

Registerhandler () {
      this.$bridge.registerhandler('testJavascriptHandler', (data, responseCallback) => {
        alert(data.test);
        this.test = data.test
        responseCallback(data)
      })
    },

完事