vue 调用 ios提供的方法

各种百度之后，在别的站看到一篇文章，介绍可以使用 WebViewJavascriptBridge与原生app进行通信；

在项目中尝试了一下，确实有效记录一下。

原文链接：

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

1，引入第三方WebViewJavascriptBridge的库

 1     function setupWebViewJavascriptBridge(callback) {
 2       if (window.WebViewJavascriptBridge) {
 3         return callback(window.WebViewJavascriptBridge)
 4       }
 5       if (window.WVJBCallbacks) {
 6         return window.WVJBCallbacks.push(callback)
 7       }
 8       window.WVJBCallbacks = [callback]
 9       let WVJBIframe = document.createElement('iframe');
10       WVJBIframe.style.display = 'none'
11       WVJBIframe.src = 'https://__bridge_loaded__'
12       document.documentElement.appendChild(WVJBIframe);
13       setTimeout(() => {
14         document.documentElement.removeChild(WVJBIframe)
15       }, 0)
16     }
17     export default {
18       callhandler(name, data, callback) {
19         setupWebViewJavascriptBridge(function (bridge) {
20           bridge.callHandler(name, data, callback)
21         })
22       },
23       registerhandler(name, callback) {
24         setupWebViewJavascriptBridge(function (bridge) {
25           bridge.registerHandler(name, function (data, responseCallback) {
26             callback(data, responseCallback)
27           })
28         })
29       }
30     }

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

这样就完成了