vue 調用 ios提供的方法

各種百度之后，在別的站看到一篇文章，介紹可以使用 WebViewJavascriptBridge與原生app進行通信；

在項目中嘗試了一下，確實有效記錄一下。

原文鏈接：

https://blog.csdn.net/szjSmiling/article/details/82773293

1，引入第三方WebViewJavascriptBridge的庫

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

新建一個js文件，把上面的代碼復制粘貼就好了

2，在main.js中引入文件

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

Vue.prototype.$bridge = Bridge

3，調用方法

let ua = navigator.userAgent;
            let isAndroid = ua.indexOf('Android') > -1 || ua.indexOf('Adr') > -1;
            let isiOS = !!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
            // console.log(isAndroid, '安卓')
            // console.log(isiOS, 'ios')
            if (isiOS) {

                this.$bridge.callhandler('popToStudyRootVC', (data) => {
                    // 處理返回數據
                    console.log(data, '我走了這里')
                })
            }

popToStudyRootVC:是有原生開發的同事定義的方法名

這樣就完成了