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:是有原生开发的同事定义的方法名

这样就完成了