本教程详细介绍了如何在electronjs无边框窗口中实现自定义的关闭、最小化和最大化按钮功能。通过利用electron的ipcmain和ipcrenderer进行进程间通信，并结合预加载脚本（preload script）确保安全性和模块化，您可以为应用创建高度定制的用户界面，同时保持核心功能的稳定与高效。
在开发Electron桌面应用时，为了实现更具品牌特色和个性化的用户界面，开发者常常选择创建无边框窗口（Frameless Window）。这种窗口移除了操作系统原生的标题栏和控制按钮（关闭、最小化、最大化），从而允许开发者完全自定义这些UI元素。本文将深入探讨如何在ElectronJS中优雅地实现这些自定义控制按钮的功能，确保代码的模块化、安全性和可维护性。
一、理解Electron的进程间通信（IPC）机制
Electron应用由一个主进程（Main Process）和多个渲染进程（Renderer Process）组成。主进程负责管理应用生命周期、创建和控制浏览器窗口，并拥有完整的Node.js API访问权限。渲染进程则负责显示Web内容，通常是HTML、CSS和JavaScript。
由于主进程和渲染进程运行在不同的上下文中，它们之间需要一种机制来相互通信，这就是Electron的进程间通信（IPC）机制。
- ipcMain 模块用于在主进程中监听来自渲染进程的消息。
- ipcRenderer 模块用于在渲染进程中发送消息到主进程。
通过这种机制，渲染进程可以请求主进程执行特权操作（如关闭窗口），而主进程则可以响应这些请求。
二、实现自定义控制按钮功能
我们将分步实现自定义的关闭、最小化和最大化功能。
1. 主进程（main.js）配置
在主进程中，我们需要监听渲染进程发送的特定消息，并执行相应的窗口操作。首先，确保您有一个BrowserWindow实例的引用，通常在创建窗口时将其存储在一个全局变量中。
// main.js
const { app, BrowserWindow, ipcMain } = require('electron');
const path = require('path');
let applicationWindow; // 全局变量用于存储BrowserWindow实例
function createWindow() {
applicationWindow = new BrowserWindow({
width: 800,
height: 600,
frame: false, // 关键：设置为无边框窗口
webPreferences: {
preload: path.join(__dirname, 'preload.js'), // 引入预加载脚本
nodeIntegration: false, // 推荐：禁用Node.js集成
contextIsolation: true // 推荐：启用上下文隔离
}
});
applicationWindow.loadFile('index.html');
// 监听渲染进程发送的窗口控制消息
ipcMain.on('CLOSE_APP', () => {
applicationWindow.close();
});
ipcMain.on('MINIMIZE_APP', () => {
applicationWindow.minimize();
});
ipcMain.on('MAXIMIZE_APP', () => {
if (applicationWindow.isMaximized()) {
applicationWindow.unmaximize(); // 如果已最大化，则恢复
} else {
applicationWindow.maximize(); // 否则最大化
}
});
}
app.whenReady().then(createWindow);
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});代码说明：
- frame: false：这是创建无边框窗口的关键设置。
- preload: path.join(__dirname, 'preload.js')：指定了预加载脚本的路径，我们将在下一节详细介绍。
- ipcMain.on(channel, listener)：主进程通过此方法监听特定频道（CLOSE_APP、MINIMIZE_APP、MAXIMIZE_APP）的消息。
- applicationWindow.close()、applicationWindow.minimize()、applicationWindow.maximize()、applicationWindow.unmaximize()：这些是BrowserWindow实例提供的API，用于控制窗口状态。
2. 预加载脚本（preload.js）配置
为了增强安全性并避免在渲染进程中直接暴露Node.js API，Electron推荐使用预加载脚本结合contextBridge来安全地将特定的API暴露给渲染进程。
// preload.js
const { contextBridge, ipcRenderer } = require('electron');
contextBridge.exposeInMainWorld('electronAPI', {
closeApp: () => ipcRenderer.send('CLOSE_APP'),
minimizeApp: () => ipcRenderer.send('MINIMIZE_APP'),
toggleMaximizeApp: () => ipcRenderer.send('MAXIMIZE_APP') // 命名为toggleMaximizeApp更符合行为
});代码说明：
- contextBridge.exposeInMainWorld('electronAPI', {...})：这会在渲染进程的window对象上创建一个名为electronAPI的全局对象，其中包含了我们希望暴露给渲染进程的方法。
- ipcRenderer.send(channel)：这些方法内部调用ipcRenderer.send来向主进程发送消息。通过这种方式，渲染进程无需直接访问ipcRenderer，从而提高了安全性。
3. 渲染进程（renderer.js）与HTML
在渲染进程中，我们需要创建实际的按钮，并为它们添加点击事件监听器，以便通过预加载脚本暴露的API来触发主进程的窗口控制功能。
首先，在您的index.html文件中添加自定义的按钮：
我的自定义窗口
欢迎使用自定义Electron应用！
这是一个无边框窗口的示例。
然后，在renderer.js中为这些按钮添加事件监听器：
// renderer.js
// 确保DOM加载完成后再绑定事件
$(document).ready(() => {
// 绑定关闭按钮事件
$('#close-btn').on('click', () => {
window.electronAPI.closeApp();
});
// 绑定最小化按钮事件
$('#minimize-btn').on('click', () => {
window.electronAPI.minimizeApp();
});
// 绑定最大化/恢复按钮事件
$('#maximize-btn').on('click', () => {
window.electronAPI.toggleMaximizeApp();
});
// 为了允许拖动无边框窗口，可以给一个区域设置CSS属性
// 例如，在 style.css 中
// .title-bar-drag-region {
// -webkit-app-region: drag;
// height: 30px; /* 根据实际标题栏高度调整 */
// width: 100%;
// position: absolute;
// top: 0;
// left: 0;
// }
// .window-controls {
// -webkit-app-region: no-drag; /* 按钮区域不允许拖动 */
// position: absolute;
// right: 0;
// top: 0;
// }
});代码说明：
- window.electronAPI.closeApp()：通过contextBridge暴露的electronAPI对象调用相应的方法，间接触发主进程的窗口控制功能。
- $(document).ready(() => { ... })：确保DOM元素完全加载后再绑定事件，
