原创文章,转载请注明出处
修改窗口大小
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
})
窗口默认最大化
- 第一种方式:
const win = new BrowserWindow({
fullscreen: true,
webPreferences: {
nodeIntegration: true
}
});
- 第二种方式
const win = new BrowserWindow({show: false});
win.maximize();
win.show();
窗口最小化
win.minimize();
打开调试模式
win.webContents.openDevTools()
修改打包的名称
- 使用electron-builder打包,在package.json添加:
"build":{
"productName": "中文名称"
}
- 使用electron-packager打包,也是在package.json添加:
"productName": "中文名称"
修改图标,修改package.json
"build":{
"productName": "中文名称",
"win": {
"icon": "./icon.ico"
}
}
注意:windows下图标大小为256*256,否则会报错,这里踩过坑,其他环境下请自行百度
使用electron-builder打包项目时图标失真
- 使用图片制作.ico文件,借鉴文章 https://newsn.net/say/electron-ico.html
- 操作: 用icofx软件打开一张图片
- 选择
create a Windows icon from the image
- 菜单栏选择
Image
===>Add New Image
===> 然后可以选择ico图标大小 - 最后导出图标
修改菜单栏等样式
隐藏菜单栏
frame:false
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
},
frame: false
})
titleBarStyle: 'hidden'
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
},
autoHideMenuBar: true
})
清空菜单
const { Menu } = require('electron')
function createWindow () {
Menu.setApplicationMenu(null)
// 创建浏览器窗口
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
})
// 并且为你的应用加载index.html
win.loadFile('./html/index.html')
// 打开开发者工具
win.webContents.openDevTools()
}
持续更新中。。。