基于vue，移动端h5如何和android、iOS客户端进行交互

前端h5基于vue，vant，客户端Android，iOS

通常在一个app里面，有一些页面是用h5做的，那么这时候就有了客户端和h5交互的问题：

1、客户端调用h5页面:
直接用WebView加载h5的地址就好了，地址完整的地址，如果这个被加载的页面需要什么参数，就拼在地址后面。（例如：https://www.baidu.com/?id=123...）

2、h5调用客户端：
在h5页面，有时候要调用起客户端的页面或者事件，都可以当成一个事件去处理：
1、先在文件夹下创建一个bridge.js，用来封装对交互事件的一个处理

let u = navigator.userAgent, app = navigator.appVersion
let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1 //安卓
let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) //ios终端

// 这是必须要写的，用来创建一些设置
function setupWebViewJavascriptBridge(callback) {
  // Android使用
  if (isAndroid) {
    if (window.WebViewJavascriptBridge) {
      callback(window.WebViewJavascriptBridge)
    } else {
      document.addEventListener(
        'WebViewJavascriptBridgeReady',
        () => {
          if(window.onWebViewJavascriptBridgeReady) window.onWebViewJavascriptBridgeReady(window.__bridge = WebViewJavascriptBridge)
          callback(window.WebViewJavascriptBridge)
        },
        false
      )
    }
  }

  // iOS使用
  if (isIOS) {
    if (window.WebViewJavascriptBridge) { return callback(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(function () { document.documentElement.removeChild(WVJBIframe) }, 0)
  }
}
// 注册回调函数，第一次连接时调用 初始化函数(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 '@/libs/bridge'
Vue.prototype.$bridge = Bridge

然后就可以在所需要的组件中用啦！
比如说：
h5一个点击事件，要调用客户端的东西，就可以直接这样写：

const data = {
            titleName: '下载',
            titleUrl: 'https://www.baidu.com/?id=123&name=456'
          }
this.$bridge.callHandler('titleDownLoad', data, response => {
            console.log('response:', response)
          })

titleDownLoad：是和客户端定义的js通信桥的事件名字，必须要和客户端一致，
data：是客户端所需要的参数，
response：是成功之后的回调，在客户端可以看到

客户端调用h5事件：
必须放在created生命周期中

this.$bridge.registerHandler('decodeMethod', (data, responseCallback) => {
      this.decodeMethod(data) // 成功返回后调用h5内部的一个方法
      responseCallback(data)
    })