关于前端:基于vue移动端h5如何和androidiOS客户端进行交互

前端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：是胜利之后的回调，在客户端能够看到