H5调用app的方法

2021-12-29  本文已影响0人  努力的画好人生这幅画

一、新建bridge文件

    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引入

import Bridge from '/bridge.js'
Vue.prototype.$bridge = Bridge

三、在需要调用的地方使用

this.$bridge. callhandler('与app约定好的方法名',{app需要的参数,function(){}})
上一篇下一篇

猜你喜欢

热点阅读