vue中与IOS通信

公司的后端管理系统需要包一个IOS外壳，所以就需要和IOS来通信，直接上代码。
参考了一些网站之后，在main.js中

window.setupWebViewJavascriptBridge = function (callback) {
    if (window.WebViewJavascriptBridge) {
        return callback(WebViewJavascriptBridge);
    }
    if (window.WVJBCallbacks) {
        return window.WVJBCallbacks.push(callback);
    }
    window.WVJBCallbacks = [callback]; // 创建一个 WVJBCallbacks 全局属性数组，并将 callback 插入到数组中。
    var WVJBIframe = document.createElement('iframe'); // 创建一个 iframe 元素
    WVJBIframe.style.display = 'none'; // 不显示
    WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__'; // 设置 iframe 的 src 属性
    document.documentElement.appendChild(WVJBIframe); // 把 iframe 添加到当前文导航上。
    setTimeout(function () {
        document.documentElement.removeChild(WVJBIframe)
    }, 0)
};
// 这里主要是注册 OC 将要调用的 JS 方法。
setupWebViewJavascriptBridge((bridge) => {
    Vue.prototype.IOSBridge = bridge;
    bridge.registerHandler('getUser', (data, responseCallback) => {
        // data 是 OC 传递过来的数据.
        // responseCallback 是 JS 调用完毕之后传递给 OC 的数据
        store.commit('setIOSUser',data);
        responseCallback({data: "js接收成功", status: 200, from: "JS"});
    });
    bridge.callHandler("jsBridgeSuccess", {status: 200}, (response) => {
        //连接成功
    });
});

这里的代码主要是将IOS存储的用户信息传入进来，进行免登陆。用到了状态管理vuex，到了store.commit后面的基本也就是vue的东西了。这里还有个重要的Vue.prototype.IOSBridge = bridge,我是把bridge对象直接存到this上了，后面的子组件就可以获取这个来给IOS来传输信息。

比如我的登录页面：

this.IOSBridge.callHandler("getJSContent", {
       username: this.form.username,
       password: this.form.password
 }, (response) => {
    //IOS收到信息后的响应
});

这样就可以实现了双向通信了。