创建好electron的项目后,运行项目,你会发现标题栏会影响你的整个项目的美观程度,处于对项目的衷心,决定隐藏掉标题栏,自己开发。
隐藏标题栏
在main.js文件中设置
const electron = require('electron')
Menu.setApplicationMenu(null) // Create the browser window.设置窗口宽高,最小宽高,图标等 mainWindow = new BrowserWindow({
width: 800,
height: 600,
minWidth: 1280,
minHeight: 800,
resizable: false,
allowRunningInsecureContent: true,
experimentalCanvasFeatures: true,
icon: './favicon.ico'
})
实现拖动
标题栏隐藏后发现窗口无法拖动,需要添加css属性实现拖动功能
-webkit-app-region: no-drag
用上边的方法是有缺点的:
- ios上如果焦点在窗口上无法实现拖动,只有焦点点击到窗口外边,才能拖动
- 双击放大的功能丢失
以上问题都有解决办法,实现复杂建议还是使用原生标题栏