Appearance
托盘图标
托盘图标
本章来学习系统托盘图标的定义,首先看不同系统图标文件的设置。
图标文件
你可以使用 PS 等软件创建图标文件。如果你使用的是 electron-vite 脚手架,需要将图标文件放在 resources 目录中。
苹果系统
苹果系统图标指的是顶部菜单栏处的图标,要求如下:
- 要求文件名以 Template 单词结尾如macTrayTemplate@2x.png
- 分辨率和尺寸可以是16x16 (72dpi) 或 32x32@2x (144dpi)
- 要求是白色图标
- 分辨率 72像素/英寸
windows
window 图标指的是底部右侧的图标,要求如上:
- 可以使用彩色的 png 图标
- 尺寸和分辨率是32x32(144dpi)文件
- 分辨率 72像素/英寸
示例代码
下面是托盘图示的定义,并且 window 与 mac 使用不同的图标
import { Menu, Tray } from 'electron'
import path from 'path'
const createTray = () => {
const tray = new Tray(
path.resolve(
__dirname,
process.platform == 'darwin'
? '../../resources/macTray@2x.png' //32x32 像素的图片
: '../../resources/windowTray.png' //可以使用彩色图片,图标的最大大小为 256x256 像素,设置为32x32像素即可
)
)
const contextMenu = Menu.buildFromTemplate([{ label: '退出', role: 'quit' }])
tray.setToolTip('向军大叔摄像头')
tray.setContextMenu(contextMenu)
}
export { createTray }
需要在 app 之后创建图标
app.whenReady().then(() => {
...
createTray()
createWindow()
...
})