在 Electron 中,默认情况下,如果你没有隐藏或自定义窗口的标题栏,那么窗口的最小化和关闭按钮通常是自动提供的。但是,当你通过
frame: false
选项隐藏了默认的窗口边框和标题栏时,你需要自己实现这些功能。
1.主进程文件中定义事件
如果你不知道哪个是主进程文件,看下package.json中main对应的配置
"main": "public/electron.js",
这里,引入icpMain模块,负责处理从渲染器进程(即 Web 页面)发送到主进程(即 Electron 应用的后台进程)的进程间通信消息,是用于监听和处理来自渲染器进程的 IPC 消息的一个接口。
const { app, BrowserWindow, Menu, ipcMain } = require("electron");
// ****
// ****
// 在BrowserWindow的实例中加入方法
//最大化
ipcMain.on("maximize-window", () => {
if (win.isMaximized()) {
win.restore(); // 如果窗口已经最大化,则恢复原始大小
} else {
win.maximize(); // 否则,最大化窗口
}
});
// 最小化
ipcMain.on("minimize-window", () => {
win.minimize();
});
// 关闭窗口
ipcMain.on("close-window", () => {
win.close();
});
2.在 preload.js 中设置 contextBridge
contextBridge
通过创建一个单向的、只能从主进程到渲染器进程的桥接,实现了两个进程之间的安全通信。ipcRenderer
是用于渲染器进程与主进程之间进行进程间通信。
const { contextBridge, ipcRenderer } = require("electron");
contextBridge.exposeInMainWorld("electron", {
maximizeWindow: () => ipcRenderer.send("maximize-window"),
minimizeWindow: () => ipcRenderer.send("minimize-window"),
closeWindow: () => ipcRenderer.send("close-window"),
});
3.页面中按钮调用
const maximizeWindow = () => {
window.electron.maximizeWindow();
};
const minimizeWindow = () => {
window.electron.minimizeWindow();
};
const closeWindow = () => {
window.electron.closeWindow();
};
// ***
// ***
// 图标按钮点击调用
<UnorderedListOutlined
className="grid-icon no-drage"
onClick={maximizeWindow}
/>
<MinusOutlined
className="grid-icon no-drage"
onClick={minimizeWindow}
/>
<CloseOutlined
className="grid-icon no-drage"
onClick={closeWindow}
/>