vue项目中h5与IOS/Android交互

1、新增bridge.js

/* eslint-disable */
// 交互必须
function setupWebViewJavascriptBridge(callback) {
  if (window.WebViewJavascriptBridge) {
    return callback(window.WebViewJavascriptBridge);
  }
  if (window.WVJBCallbacks) {
    return window.WVJBCallbacks.push(callback);
  }
  window.WVJBCallbacks = [callback];
  const 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((bridge) => {
      bridge.callHandler(name, data, callback);
    });
  },
  registerhandler(name, callback) {
    setupWebViewJavascriptBridge((bridge) => {
      bridge.registerHandler(name, (data, responseCallback) => {
        callback(data, responseCallback);
      });
    });
  },
};

2、在main.js中引入bridge.js，注册到vue原型中，方便其他页面使用

// 路径为你bridge.js路径

import Vue from 'vue';

import bridge from '@/common/methods/bridge';

Vue.prototype.$bridge = bridge

3、在页面中使用

常见的绑定在click事件中

// 进行打赏操作
reward() {
  this.$bridge.callhandler('getPayParams', { groupId: this.groupId }, (data) => {
    console.log(data);
  });
},