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); }); },