在 Electron 中,进程使用 ipcMain 和 ipcRenderer 模块,通过开发人员定义的“通道”传递消息来进行通信。 这些通道是 任意 (您可以随意命名它们)和 双向 (您可以在两个模块中使用相同的通道名称)的。
1、修改electron.js
const createWindow = () => {
// Create the browser window.
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
titleBarStyle: 'hidden',
webPreferences: {
preload: path.join(__dirname, 'preload.js'),
},
});
// and load the index.html of the app.
// win.loadFile("index.html");
mainWindow.loadURL(
isDev
? "http://localhost:3000"
: `file://${path.join(__dirname, "../build/index.html")}`
);
// Open the DevTools.
if (isDev) {
mainWindow.webContents.openDevTools({ mode: "detach" });
}
//不通过按钮最大化还原时需改变自定义图标
mainWindow.on('maximize', (event) => {
mainWindow.webContents.send('max-handle', true)
});
mainWindow.on('unmaximize', (event) => {
mainWindow.webContents.send('max-handle', false)
});
};
app.whenReady().then(() => {
// 关闭窗体
ipcMain.on('close-app', (event) => {
const webContents = event.sender
const win = BrowserWindow.fromWebContents(webContents)
if (win) {
win.close()
}
})
// 最大化窗体
ipcMain.on('max-app', (event) => {
const webContents = event.sender
const win = BrowserWindow.fromWebContents(webContents)
win.maximize()
})
// 还原窗体
ipcMain.on('unmax-app', (event) => {
const webContents = event.sender
const win = BrowserWindow.fromWebContents(webContents)
win.unmaximize()
})
// 最小化窗体
ipcMain.on('min-app', (event) => {
const webContents = event.sender
const win = BrowserWindow.fromWebContents(webContents)
win.minimize()
})
createWindow()
});
2、通过预加载脚本暴露 ipcRenderer.send ,在
preload.js添加
const { contextBridge, ipcRenderer } = require('electron')
contextBridge.exposeInMainWorld('electronAPI', {
closeApp: () => ipcRenderer.send('close-app'),
maxApp: () => ipcRenderer.send('max-app'),
unmaxApp: () => ipcRenderer.send('unmax-app'),
minApp: () => ipcRenderer.send('min-app'),
maxHandle: (ismax) => ipcRenderer.on('max-handle', ismax)
})
3、添加菜单组件,这里使用的是React
import "./CustomizeMenus.css"
import { Button } from 'antd';
import { useState } from 'react';
import {
MinusOutlined,
CloseOutlined,
ExpandOutlined,
CompressOutlined
} from '@ant-design/icons';
const CustomizeMenus = ({ title}) => {
const [isMax, setIsMax] = useState(false);
//接收到主程序的消息
window.electronAPI.maxHandle((event, value) => {
if (value) {
setIsMax(true)
} else {
setIsMax(false)
}
})
const min = () => {
window.electronAPI.minApp()
};
const max = () => {
if (isMax) {
window.electronAPI.unmaxApp()
setIsMax(false)
}else{
window.electronAPI.maxApp()
setIsMax(true)
}
};
const closed = () => {
window.electronAPI.closeApp()
};
return (
<>
<div id="custom-menu">
<div className="menu-div menu-text"> <span>{title}</span></div>
<div className="menu-div" id="menu-btn">
<Button type="text" icon={<MinusOutlined />} onClick={() => min()} />
<Button type="text" icon={isMax?<CompressOutlined />:<ExpandOutlined />} onClick={() => max()} />
<Button type="text" id="closed-btn" icon={<CloseOutlined />} onClick={() => closed()} />
</div>
</div>
</>
);
};
export default CustomizeMenus;
4、设置拖动区域
#custom-menu {
width: 100%;
height: 32px;
background-color: rgb(178, 123, 209);
-webkit-app-region: drag;/* 设置自定义可拖动区域 */
-webkit-user-select: none;/* 禁用文本选择 */
}
.menu-div {
display: inline-block;
height: 32px;
line-height: 30px;
}
.menu-text{
color: rgb(255, 255, 255);
margin-left: 16px;
}
#closed-btn:hover {
color: rgba(0, 0, 0, 0.88);
background-color: red !important;
}
#closed-btn:active {
color: rgba(0, 0, 0, 0.88);
background-color: rgb(155, 5, 5) !important;
}
#custom-menu .ant-btn{
border-radius: 0px;
}
#menu-btn {
position: absolute;
right: 0px;
-webkit-app-region: no-drag;/* 按钮标记为不可拖拽 */
}
项目案例下载https://download.csdn.net/download/qq_34533703/87994664