electron 下 微信快速登录

前情

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