Electron无边框窗口：自定义按钮实现IPC通信

本篇文章主要是结合我之前面试的各种经历和实战开发中遇到的问题解决经验整理的，希望这篇《Electron无边框窗口：自定义按钮实现IPC通信》对你有很大帮助！欢迎收藏，分享给更多的需要的朋友学习~

本教程详细阐述如何在 Electron 无边框窗口中实现自定义的关闭、最小化和最大化功能。通过利用 Electron 的 ipcMain 和 ipcRenderer 模块进行进程间通信，我们将展示如何将 UI 交互逻辑与主进程的窗口操作分离，并探讨使用预加载脚本进行优化的方法，从而提升应用的灵活性和可维护性。

在开发 Electron 应用程序时，为了实现更具品牌特色的用户界面，我们常常会选择创建无边框窗口（Frameless Window）。然而，无边框窗口移除了操作系统原生的标题栏和控制按钮（如关闭、最小化、最大化），这意味着开发者需要自行实现这些基本功能。本文将详细指导您如何利用 Electron 强大的进程间通信（IPC）机制，为您的无边框窗口添加自定义的控制按钮。

1. Electron IPC 机制简介

Electron 应用程序由一个主进程（Main Process）和多个渲染进程（Renderer Process）组成。主进程负责创建和管理浏览器窗口，而渲染进程则运行网页内容（如 HTML、CSS 和 JavaScript）。由于安全和架构设计原因，渲染进程无法直接访问操作系统级别的 API 或 Electron 的主进程模块。为了使渲染进程能够请求主进程执行特定操作（例如关闭窗口），Electron 提供了 IPC 模块：ipcMain 和 ipcRenderer。

• ipcRenderer: 运行在渲染进程中，用于向主进程发送消息。
• ipcMain: 运行在主进程中，用于监听并响应来自渲染进程的消息。

通过这种机制，渲染进程可以触发主进程执行窗口操作，从而实现自定义控制按钮的功能。

2. 主进程实现：监听渲染进程消息

在您的 Electron 应用的主进程文件（通常是 main.js 或 index.js）中，您需要引入 ipcMain 模块，并设置监听器来处理来自渲染进程的特定消息。当接收到这些消息时，主进程将执行对应的窗口操作。

首先，确保您有一个 BrowserWindow 实例的引用，通常将其存储为一个全局变量，以便在 ipcMain 监听器中访问。

// main.js 或 index.js

const { app, BrowserWindow, ipcMain } = require('electron');
let applicationWindow; // 全局变量，用于存储 BrowserWindow 实例

function createWindow() {
    applicationWindow = new BrowserWindow({
        width: 800,
        height: 600,
        frame: false, // 设置为无边框窗口
        webPreferences: {
            // 注意：直接开启 nodeIntegration: true 和 contextIsolation: false 存在安全风险
            // 推荐使用预加载脚本 (preload) 和 contextIsolation: true
            nodeIntegration: true, // 允许渲染进程使用 Node.js API (出于示例简化，实际项目中应谨慎)
            contextIsolation: false, // 关闭上下文隔离 (出于示例简化，实际项目中应谨慎)
            // preload: path.join(__dirname, 'preload.js') // 如果使用 preload 脚本，则应在此配置
        }
    });

    applicationWindow.loadFile('index.html');

    // 其他窗口事件处理...
}

app.whenReady().then(createWindow);

// 监听渲染进程发送的关闭、最小化、最大化消息
ipcMain.on("CLOSE-APP", (event) => {
    if (applicationWindow) {
        applicationWindow.close();
    }
});

ipcMain.on("MINIMIZE-APP", (event) => {
    if (applicationWindow) {
        applicationWindow.minimize();
    }
});

ipcMain.on("MAXIMIZE-APP", (event) => {
    if (applicationWindow) {
        // 检查窗口是否已最大化，以便在最大化和恢复之间切换
        if (applicationWindow.isMaximized()) {
            applicationWindow.unmaximize();
        } else {
            applicationWindow.maximize();
        }
    }
});

// 其他主进程事件处理...

在上述代码中：

• 我们通过 ipcMain.on(channel, listener) 方法注册了三个监听器，分别对应 "CLOSE-APP"、"MINIMIZE-APP" 和 "MAXIMIZE-APP" 消息通道。
• 当主进程收到这些消息时，它会调用 applicationWindow 对象的相应方法（close(), minimize(), maximize(), unmaximize()）来控制窗口状态。
• 对于最大化按钮，我们添加了一个逻辑来判断当前窗口是否已最大化，以实现最大化和恢复（unmaximize）之间的切换。

3. 渲染进程实现：发送消息到主进程

在您的渲染进程文件（例如 renderer.js，或直接嵌入在 index.html 的