公司的后端管理系统需要包一个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收到信息后的响应
});
这样就可以实现了双向通信了。
