electron自定义导航栏、菜单

最新推荐文章于 2025-09-10 02:49:54 发布

原创最新推荐文章于 2025-09-10 02:49:54 发布 · 5.7k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#electron #javascript #html5 #node.js

JavaScript 同时被 3 个专栏收录

30 篇文章

订阅专栏

nodejs

15 篇文章

订阅专栏

html

13 篇文章

订阅专栏

本文介绍了如何在 Electron 应用中自定义导航栏，包括关闭默认边框、创建HTML导航栏及应用CSS样式。通过设置`frame:false`和`titleBarStyle:'hidden'`来隐藏边框，使用`-webkit-app-region:drag/no-drag;`属性处理拖动区域。自定义部分展示了如何布局header和button，并提到了为按钮添加功能的后续步骤。文章适合需要定制化 Electron 客户端界面的开发者阅读。

在这里插入图片描述
其实自定义导航栏比较简单，但是一般自用的软件没有必要自定义，面向客户的可能需要自定义一下。
主要分为两步：1.关闭默认的边框win和mac的方法不一样。2.在html里写自己的导航栏。3.给自定义的导航添加css样式。有两个-webkit-app-region: drag;和-webkit-app-region: no-drag;，可以拖动和不可以拖动。

取消默认边框（导航栏）

在BrowserWindow里面设置frame:false，如果你的是mac系统则titleBarStyle: 'hidden',

// 主进程
var electron=require("electron")
// console.log(electron)
var app=electron.app // 引用app
var BrowserWindow=electron.BrowserWindow // 窗口引用
var BrowserView=electron.BrowserView // 窗口嵌入
app.commandLine.appendSwitch('ignore-gpu-blacklist');

var mainWindow=null // 声明要打开的窗口

app.on("ready",()=>{
    mainWindow=new BrowserWindow({
        width:1000,
        height:660,
        minWidth:800,
        minHeight:500,
        frame:false,
        backgroundColor: '#123456',
        title:"IC365club",
        icon:"icon/icon.png",
        webPreferences: {
            nodeIntegration: true, //设置开启nodejs环境
            contextIsolation: false,
            enableRemoteModule: true, //允许子进程调用主进程的api
            nativeWindowOpen:true,
            webgl:true,
            webSecurity: false
            // experimentalFeatures:true
        }
    })
    // require('./menu.js') // 引入自定义菜单
    mainWindow.loadFile('index.html') // 加载页面    
    mainWindow.on("close",()=>{
        mainWindow=null // 关闭窗口时就关闭程序，避免占用过多资源
    })
})

这样第一步就是是完成了
在这里插入图片描述

自定义

<style>      
        header{
            height: 60px;
            width: 100%;
            -webkit-app-region: drag;
            /* -webkit-app-region: no-drag; */
            background: rgb(155, 5, 5);
        }
        button{
        	width:40px;
        	height:40px;
        	background: rgb(80,80, 80);
        	/* -webkit-app-region: no-drag; */
        }
    </style>
    <header>这里是菜单栏<button>功能按钮</button></header>