Electron中自定义窗口导航条

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: {// 开启nodenodeIntegration: true,// 取消上下文隔离contextIsolation: false,// 开启remoteenableRemoteModule: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()
})

Electron中自定义窗口导航条相关推荐

【Silverlight】Bing Maps学习系列（九）：自定义功能导航条（Custom NavigationBar）
微软Bing Maps Silverlight Control实现了最基本的地图呈现功能,其功能其他是非常的强大,可以支持很多的扩展功能开发,本文通过自定义功能导航菜单为例介绍基于Bing Maps ...
自定义底部导航条刘海机型屏幕出现黑色横条遮挡问题，适配ihone x，ihone 11 和12的机型
自定义底部导航条刘海机型屏幕出现黑色横条遮挡问题,适配ihone x,ihone 11 和12的机型修改前情况修改后情况打开项目文件 app.vueapp.vue1.增加全局参数 globalD ...
微信小程序中自定义背景导航栏透明背景设置
首先确定好自己要在哪个页面中使用自定义头部导航栏样式在该页面中找到xxx.json文件中添加上 "navigationStyle":''custom" 这样在页面中头部 ...
BootStrap中修改navbar导航条的默认高度
用BootStrap写点东西,用到了导航栏,但是导航栏的高度非常的臃肿就像这样的,太高了,因为BootStrap设置的样式高度是50px, 我想实现的是这样的修改其默认的样式高度,就能实现导航栏高 ...
Electron 自定义窗口 —— 桌面时钟
本节主要讲解如何使用 Electron 创建自定义窗口,并带领大家开发一款漂亮的桌面时钟,效果如下: 众所周知,在 Electron 里面,窗口都是通过实例化 BrowserWindow 类创建出来的 ...
Qt4_在Qt设计师中集成自定义窗口部件
在Qt设计师中集成自定义窗口部件在Qt设计师中使用自定义窗口部件之前,我们必须让Qt设计师先察觉到它们的存在.有两种方法可以完成这一任务:改进法(promotion)和插件法(pluigin). 改 ...
iPhone App开发导航条(Navigation Bar)素材PSD下载
不管是iPhone还是Android的应用App界面基本上最上方都会有个导航条(Navigation Bar).于是我决定创建此页面整理收集所有好看的适合在iPhone App应用开发中使用的导航条素 ...
仿Apple官网导航条
仿Apple官网导航条效果在线预览使用flex布局和媒体查询实现了响应式的Apple的中文官网导航条,仿做的动画,字体不一致不会CSS动画,未有学习 flex掌握感觉还可以媒体查询也懂得了一小部 ...
flask系列---模板的继承及Bootstrap实现导航条（四）
在建设一个网站的时候,不同的页面有很多元素是一样的,比如导航条.侧边栏等,我们可以使用模板的继承,避免重复编写html代码.现在我们打算实现一个在网页上方的导航条,并在所有的页面中继承这个导航条.导航 ...