electron中如何优雅的使用子窗口

在Electron中优雅地使用子窗口（BrowserWindow）涉及以下几个方面：创建、管理、通信和关闭子窗口。

1. 创建子窗口

使用 BrowserWindow 类创建子窗口时，可以传递一个选项对象来定制窗口的行为。例如：

const { BrowserWindow } = require('electron');

function createChildWindow() {
    const childWindow = new BrowserWindow({
        width: 800,
        height: 600,
        parent: mainWindow,  // 设置父窗口
        modal: true,  // 模态窗口
        show: false,  // 创建时不显示
        webPreferences: {
            nodeIntegration: true,  // 启用Node.js集成
            contextIsolation: false, // 关闭上下文隔离
        }
    });

    childWindow.loadURL('https://example.com');
    
    // 当子窗口准备好后再显示，避免显示空白窗口
    childWindow.once('ready-to-show', () => {
        childWindow.show();
    });

    // 处理子窗口关闭事件
    childWindow.on('closed', () => {
        childWindow = null;
    });

    return childWindow;
}

2. 窗口之间的通信

父窗口和子窗口可以通过 ipcMain 和 ipcRenderer 进行通信。

在子窗口中发送消息：

// 子窗口代码 (renderer process)
const { ipcRenderer } = require('electron');

ipcRenderer.send('message-from-child', 'Hello from child window!');

在主进程中接收并处理消息：

// 主进程代码 (main process)
const { ipcMain } = require('electron');

ipcMain.on('message-from-child', (event, message) => {
    console.log(message);  // 输出 'Hello from child window!'
});

3. 子窗口的管理

为了更好地管理子窗口，可以使用数组或对象来存储和追踪子窗口的引用。

let childWindows = [];

function createChildWindow() {
    const childWindow = new BrowserWindow({/*...*/});
    
    childWindows.push(childWindow);

    childWindow.on('closed', () => {
        // 从数组中移除已关闭的窗口
        childWindows = childWindows.filter(win => win !== childWindow);
    });

    return childWindow;
}

4. 优雅地关闭子窗口

在需要关闭所有子窗口时，可以遍历子窗口数组并关闭每一个窗口。

function closeAllChildWindows() {
    childWindows.forEach(win => win.close());
    childWindows = [];
}

5. 子窗口的内存管理

确保子窗口在关闭时正确释放资源，避免内存泄漏。一般在 closed 事件中将窗口对象设为 null。

总结

优雅地使用子窗口不仅在于创建和显示，还包括合理地管理它们的生命周期和内存，确保窗口间的通信流畅，并在必要时能够平滑地关闭子窗口。通过这些技巧，可以更好地控制Electron应用中的子窗口体验。