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>

这样就算自定义好了。
但是里面还没有给按钮添加功能，比如关闭窗口，最大化，标准化，最小化，logo，icon等等的，这些就不做详细的描述了，功能可以参考官方文档，很详细。

文章首发：www.ic365club.com
ic365club旨在共同学习，共同进步