vue中使用WebViewJavascriptBridge

当android或ios中使用webview嵌入H5页面时，涉及到两端的相互调用，我使用的是WebViewJavaScriptBridge

1. 创建utils/util.js文件，封装WebViewJavascripeBridge（完全copy即可）

export const setupWebViewJavascriptBridge = (source, callback) => {
  /*
    只要source == wechat_applet 都不执行jsbridge,
    这条判断是我页面中本身的业务逻辑
    因为小程序中无法加载下面创建的iframe，除非小程序做相应的业务域名配置
    * */
  if (source === 'wechat') return

  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(function () {
     document.documentElement.removeChild(WVJBIframe)
  }, 0)
}

export const compatibilityAndroidAndIOS = (callback) => {
   callback.call()
   if (!window.WebViewJavascriptBridge) {
     document.addEventListener('WebViewJavascriptBridgeReady', () => {
      callback.call()
     })
   }
}

2. 在页面中引入该方法

import { setupWebViewJavascriptBridge, compatibilityAndroidAndIOS} from '@utils/util'

3. 使用（callHandler，registerHandler两种模式）

created(){
   getUserInfo()
   appShareReportCompatible()
}

methods:{
    getUserInfo () {
      compatibilityAndroidAndIOS(() => {
        setupWebViewJavascriptBridge('wechat', (bridge) => {
          bridge.callHandler('getUserInfo', {}, (data) => {
            let _data = JSON.parse(data)
          })
        })
      })
    },
    
    
    appShareReportCompatible () {
      compatibilityAndroidAndIOS(() => {
        setupWebViewJavascriptBridge('wechat', (bridge) => {
          bridge.registerHandler('getShareModel', (data, responseCallback) => {
            let params = {}
            responseCallback(params)
          })
        })
      })
    },
}

特别提醒

• callHandler()表明是H5需要调用客户端注册的某个方法，获取某些信息
• registerHandler()是H5注册的方法，等待客户端主动去调用，传递某些参数给客户端
• callHandler()有3个参数，第一个就是双方协定好的方法名，第二个就是H5传到客户端方法的参数，第三个就是回调函数，
• registerHandler()有2个参数，第一个是双方协定好的方法名，第二个是回调函数