ElectronJS 无边框窗口自定义控制按钮：IPC 通信实现详解

本教程详细介绍了如何在 electronjs 无边框窗口中实现自定义的关闭、最小化和最大化按钮。我们将利用 electron 的 `ipcmain` 和 `ipcrenderer` 模块进行进程间通信，实现渲染进程触发 ui 事件，主进程执行窗口操作的机制，并探讨使用 preload 脚本提升安全性和代码组织性。

在 Electron 应用中，无边框窗口（Frameless Window）因其高度可定制的外观和用户体验而广受欢迎。然而，移除原生窗口边框的同时，也意味着失去了操作系统提供的标准窗口控制按钮（关闭、最小化、最大化）。为了在无边框窗口中实现这些基本功能，我们需要创建自定义的 UI 按钮，并通过 Electron 的进程间通信（IPC）机制，将渲染进程（UI 界面）的用户操作传递给主进程（负责窗口管理），从而实现对窗口的控制。

核心机制：Electron IPC 通信

Electron 应用程序由一个主进程和多个渲染进程组成。主进程负责创建和管理 BrowserWindow 实例，并拥有完整的 Node.js API 访问权限，可以执行系统级操作。渲染进程则负责显示网页内容，通常不直接访问 Node.js API（出于安全考虑）。

为了让渲染进程能够请求主进程执行窗口操作，我们需要使用 Electron 的 IPC 模块：

• ipcMain：在主进程中使用，用于监听来自渲染进程的消息。
• ipcRenderer：在渲染进程中使用，用于向主进程发送消息。

通过这种方式，渲染进程可以发送一个“意图”（例如“关闭应用”），而主进程则根据这个意图执行实际的窗口操作。

主进程 (Main Process) 实现

在主进程（通常是 main.js 文件）中，我们需要：

1. 创建一个 BrowserWindow 实例，并将其配置为无边框。
2. 声明一个变量来持有 BrowserWindow 实例的引用，以便在 IPC 事件处理器中访问它。
3. 使用 ipcMain.on() 方法监听渲染进程发送的自定义消息。
4. 在收到消息时，调用 BrowserWindow 实例相应的窗口控制方法。

以下是 main.js 的示例代码：

标签： css html js node.js node windows 操作系统 处理器 app mac ai macos w