1.在主进程background.js或者main.js中主窗口配置frame: false
async function createWindow() {Menu.setApplicationMenu(null);// Create the browser window.const win = new BrowserWindow({width: 1000,height: 600,resizable: false,frame: false,webPreferences: {nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION,},});if (process.env.WEBPACK_DEV_SERVER_URL) {// Load the url of the dev server if in development modeawait win.loadURL(process.env.WEBPACK_DEV_SERVER_URL);if (!process.env.IS_TEST) win.webContents.openDevTools();} else {createProtocol("app");// Load the index.html when not in developmentwin.loadURL("app://./index.html");}ipcMain.on("window-close", () => {win.destroy();});ipcMain.on("window-min", () => {win.minimize();});ipcMain.on("window-max", () => {if (win.isMaximized()) {win.unmaximize();} else {win.maximize();}});
}
2.此时顶部的标题不见了,现在需要自己自定义放大,缩小,关闭等操作。
上面的标题自己使用css html写。
3.第二步自己写好后,下面说下向主进程发送命令进行放大,缩小,关闭。
<script setup>
const { ipcRenderer } = require("electron");// 关闭窗口
const toClose = () => {ipcRenderer.send("window-close", "111111111111111");
};
// 缩小窗口
const toMin = () => {ipcRenderer.send("window-min", "111111111111111");
};
// 放大窗口
const toMax = () => {ipcRenderer.send("window-max", "111111111111111");
};
</script>
4.主进程监听渲染进程发送的指令,下面那部分就是监听的。
async function createWindow() {Menu.setApplicationMenu(null);// Create the browser window.const win = new BrowserWindow({width: 1000,height: 600,resizable: false,frame: false,webPreferences: {nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION,},});if (process.env.WEBPACK_DEV_SERVER_URL) {// Load the url of the dev server if in development modeawait win.loadURL(process.env.WEBPACK_DEV_SERVER_URL);if (!process.env.IS_TEST) win.webContents.openDevTools();} else {createProtocol("app");// Load the index.html when not in developmentwin.loadURL("app://./index.html");}ipcMain.on("window-close", () => {win.destroy();});ipcMain.on("window-min", () => {win.minimize();});ipcMain.on("window-max", () => {if (win.isMaximized()) {win.unmaximize();} else {win.maximize();}});
}