Vue中封装WebViewJavascriptBridge实现与app原生交互

项目背景：原生app里边一些需要页面需要h5来实现，涉及到app原生与h5交互，记录一下。

如果业务逻辑比较复杂，比如页面需要获取 IOS 端或者安卓端传回的返回值，或者 IOS 端需要调用 js 方法。可以通过第三方库来实现，项目用的是 WebViewJavascriptBridge。

使用WebViewJavaScriptBridge交互封装，统一管理，方便维护。

注：app和安卓端需要装JSBridge库，并提供相关方法供h5调用。

iOS库地址(1.1w+ Star): https://github.com/marcuswestin/WebViewJavascriptBridge

Android库地址(6k+ Star): https://github.com/lzyzsd/JsBridge

一 、什么是webViewjavascripBridge？

WebViewJavascriptBridge是移动UIView和Html交互通信的桥梁，用白话来说就是实现java（ios为oc）和js的互相调用的桥梁。替代了WebView的自带的JavascriptInterface的接口，使得我们的开发更加灵活和安全。

二、如何在vue项目中使用

创建 src/utils/bridge.js 文件，用于封装 WebViewJavascriptBridge将以下代码拷贝到 bridge.js 文件中。

// bridge.js

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)

})  })   }}

在 main.js 中引入该文件

// main.js

import Bridge from './utils/bridge.js'

Vue.prototype.$bridge = Bridge

当客户端需要调用 js 函数时,事先注册约定好的函数即可

在vue需要调用客户端方法的组件中（事先需要与客户端同事约定好方法名）

// vue调app原生方法
this.$bridge.callhandler('ObjC Echo', params, (data) => {
  // 处理app回调返回给vue的数据
})


//app原生调vue里边方法
this.$bridge.registerhandler('JS Echo', (data, responseCallback) => {
    alert('JS Echo called with:', data)  
    const data = {id: 'xxxx'}
    // vue返回给app的数据
    responseCallback(data)
})