Electron中自定义窗口导航条

Posted 2021-06-09 aiguangyuan

1. 隐藏顶部菜单

调用BrowserWindow模块创建主窗口以后设置菜单为空即可。 

mainWindow.setMenu(null); 

如果是Mac系统，上面的设置可能会不生效，需要利用app模块做以下操作。

app.dock.hide();

2. 实现导航条可拖拽

在自定义的导航条容器外层添加CSS样式设置。

.my-header {
    width: 100%;
    height: 30px;
    line-height: 30px;
    background-color: rgb(198, 47, 47);
	/* 值为no-drag时不可拖拽 */
    -webkit-app-region: drag;
}

3. 隐藏最小化、最大化和关闭按钮

调用BrowserWindow模块创建主窗口时设置frame属性。

mainWindow = new BrowserWindow({
    height: 563,
    useContentSize: true,
    width: 1000,
    // 去掉最顶部的导航，以及最大化、最小化、关闭按钮
    frame: false      
});

4. 自定义最小化、最大化和关闭按钮

在渲染进程中通过ipcRenderer模块向主进程发起通知调用相关命令，关闭窗口。

// 最小化
min(){
	this.$electron.ipcRenderer.send('window-min');  
},
// 最大化
max(){

	this.$electron.ipcRenderer.send('window-max');
},
// 关闭
close(){
	this.$electron.ipcRenderer.send('window-close');
}

主进程中响应渲染进程的的通知执行相关命令。

// 最小化窗口
ipcMain.on('window-min',()=>{
    mainWindow.minimize()
})
// 最大化窗口
ipcMain.on('window-max',()=>{
	// 如果已经是最大化窗口就还原
    if(mainWindow.isMaximized()){
        mainWindow.restore();
     }else{
        mainWindow.maximize()
    }
})
// 关闭窗口
ipcMain.on('window-close',()=>{
    mainWindow.close()
})

特别注意：上面的代码最好是直接写在主进程文件中，如果写到另外一个文件中然后在主进程中引入可能会不生效，主要原因是获取当前窗口mainWindow会存在为null的情况。

下面给出主进程文件最常用的代码示例：

// main.js
const { app,ipcMain, BrowserWindow} = require("electron");

const path = require("path");
 
const createWindow = () => {
    // 创建窗口
    const mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        // 去掉顶部的导航以及最大化、最小化、关闭按钮
        frame: false,  
        webPreferences: {
            // 开启node
            nodeIntegration: true,
            // 取消上下文隔离
            contextIsolation: false,
            // 开启remote
            enableRemoteModule:true,
        }
    });
    // 加载本地文件(在Electron-Vue中会有所不同)
    mainWindow.loadFile(path.join(__dirname, "index.html"));
    
    // 加载远程地址
    // mainWindow.loadURL('https://github.com');
 
    // 开启调试模式
    mainWindow.webContents.openDevTools();

    //去掉顶部菜单
    mainWindow.setMenu(null);  
 
}

// 在Mac系统下隐藏顶部菜单
app.dock.hide();
 
// 监听应用的启动事件
app.on("ready", createWindow);
 
// 兼容MacOS系统的窗口关闭功能
app.on("window-all-closed", () => {
    // 非MacOS直接退出
    if (process.platform != "darwin") {
        app.quit();
    }
});
 
// 点击MacOS底部菜单时重新启动窗口
app.on("activate", () => {
    if (BrowserWindow.getAllWindows.length == 0) {
        createWindow();
    }
})

// 最小化窗口（自定义导航条时）
ipcMain.on('window-min',()=>{
    mainWindow.minimize()
})
// 最大化窗口（自定义导航条时）
ipcMain.on('window-max',()=>{
    // 如果已经是最大化窗口就还原
    if(mainWindow.isMaximized()){
        mainWindow.restore();
     }else{
        mainWindow.maximize()
    }
})
// 关闭窗口（自定义导航条时）
ipcMain.on('window-close',()=>{
    mainWindow.close()
})