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

Posted 2021-09-13 随心所欲的海草

前端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：是成功之后的回调，在客户端可以看到