其实没有网上那么麻烦,如果你仅仅只是想去掉标题,还有下面的工具栏,只需要如下配置

const win = new BrowserWindow({
    width: 800,
    height: 600,
    titleBarStyle: "hidden",
    titleBarOverlay: {
        color: "#fff",
        symbolColor: "black",
    }
});

这样就会出现原生的最小化,关闭等按钮在 win 的右侧,主要这个区域是悬浮在整个软件右上角的。

在这里插入图片描述
鼠标移上去,可以看到支持 win11 的布局功能
在这里插入图片描述
以下源码大部分截取自 electron 初始化例子 https://www.electronjs.org/zh/docs/latest/tutorial/examples

注意

如果你需要完全重写标题栏,那这个方案不是你想要的。

源码

index.js

const { app, BrowserWindow } = require("electron");
const path = require("path");

function createWindow() {
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        /** 主要代码 */
        titleBarStyle: "hidden",
        titleBarOverlay: {
            color: "#f8f8f8",
            symbolColor: "black",
        },

        webPreferences: {
            devTools: true,
            preload: path.join(__dirname, "preload.js"),
        },
    });

    win.loadFile("index.html")
        .then((result) => {
            win.webContents.openDevTools();
        })
        .catch((err) => {});
}

app.whenReady().then(() => {
    createWindow();

    app.on("activate", () => {
        if (BrowserWindow.getAllWindows().length === 0) {
            createWindow();
        }
    });
});

app.on("window-all-closed", () => {
    if (process.platform !== "darwin") {
        app.quit();
    }
});

index.html

<html>

<head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';">
    <style>
        body {
            margin: 0;


        }
        /** 主要代码 */
        .title {
            height: 32px;
            background-color: #f8f8f8;
            -webkit-app-region: drag;
        }
    </style>
</head>

<body>
    <!-- 主要代码 -->
    <div class="title"></div>
    <h1>Hello World!</h1>
    <p>
        We are using Node.js <span id="node-version">16.5.0</span>,
        Chromium <span id="chrome-version">94.0.4606.81</span>,
        and Electron <span id="electron-version">15.3.1</span>.
    </p>


</body>

</html>

preload.js

window.addEventListener("DOMContentLoaded", () => {
    const replaceText = (selector, text) => {
        const element = document.getElementById(selector);
        if (element) element.innerText = text;
    };

    for (const type of ["chrome", "node", "electron"]) {
        replaceText(`${type}-version`, process.versions[type]);
    }
});
 
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐