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