前情
electron中 jQuery与node.js并不能完美的兼容，对于这个问题，electron的官方文档也给出了相应的解决方法：解决方法
由于项目中已经使用了node.js的相关语法，所以禁用node.js这条路并行不通，同时我们也不想给node变量重新命名，所以最后决定从jQuery下手。
在整个项目中，首先将jQuery从链接引入改成npm 安装jQuery包，用import来引入jQuery，这样几乎解决了100%的问题。
问题
但是在测试的时候发现了一个问题，微信快速登录时，地址会重定向到微信授权登录，微信自动调用了jQuery，所以微信快速登录报错
微信快速登录报错.png
报错的原因十分清楚，就是electron在使用node.js时无法使用jQuery。在代码中，点击微信登录时，打开了新窗口，打开新窗口用的是window.open(url)。
来让我们看看electron文档中关于window.open()的描述文档地址。
然后来捋一捋我们需要怎么做才能实现微信快速登录，由于微信快速登录一定会用到jQuery，所以打开的新窗口中一定不能使用node，
尝试1
我在electron文档中找到了这个webContents
尝试代码如下，在主进程main.js中：
mainWindow = new BrowserWindow({
webPreferences: {
nativeWindowOpen: true,
},
});
mainWindow.webContents.on('new-window', (event, url, frameName, disposition, options, additionalFeatures) => {
if (frameName === '快速登录') {
event.preventDefault();
const test = {
modal: true,
parent: mainWindow,
width: 600,
height: 600,
title: '微信快速登录',
webPreferences: {
nodeIntegration: false
},
};
Object.assign(options, test);
const win = new BrowserWindow(test);
win.loadURL(url);
}
})
emmmmm,这样解决了微信中使用jQuery的问题，但是又发现，在新窗口中找不到window.opener，由于快速登录需要微信那边返回的信息，然后主窗口做出相应操作，所以需要窗口间进行互相通信。
而且上述做法还有一个很大的问题，从代码中可以推测，是主进程监听打开新窗口的名字，如果窗口名字对应，则进行一些操作后再打开一个新窗口，这样就打开了两个新窗口，这也是在新窗口中找不到window.opener的原因
那有没有别的满足新窗口不使用node通信方法呢？webContents中的监听方法did-navigate
尝试二：
const BrowserWindow = require('electron').remote.BrowserWindow;
let newWin = new BrowserWindow({ width: 600, height: 450, title: '亦友快速登录', resizable: false, webPreferences: {nodeIntegration: false}});
newWin.on('closed', function() {
newWin = null;
});
newWin.loadURL(`${window.location.origin}/user/third-login?way=${type}`);
newWin.show();
newWin.webContents.on('did-navigate', (event, url) => {
//对应操作
})
上述代码中，创建一个禁用node(webPreferences: {nodeIntegration: false})的新窗口,从头到尾窗口只需打开一次，这样在新窗口中也可以访问window.opener,这方便了在网页状态下的窗口之间的通信。
而在electron中，可以通过新窗口webContents的各种监听方法获取到新窗口相应的信息。
问题完美解决(▽)
感想
像这种文档比较成熟的工具，遇到的问题，一般都可以从文档中寻找到解决方案。愈发感觉这其实就是面向文档编程o(╥﹏╥)o
网友评论