托盘图标

托盘图标

向军大叔每晚八点在 抖音 和 bilibli 直播

本章来学习系统托盘图标的定义，首先看不同系统图标文件的设置。

图标文件

你可以使用 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()
	...
})