托盘菜单

本指南将引导你在系统通知区域中创建一个带有自己上下文菜单的托盘图标。

在 macOS上，图标将位于你屏幕右上角的菜单栏额外区域。
在 Windows上，图标将位于任务栏末尾的通知区域中。
在 Linux 上，托盘的位置会因你的桌面环境而不同。

创建托盘图标

你的 Electron 应用的托盘图标需要通过编程的方式，使用 Tray 类实例来创建。该类的构造函数需要一个 NativeImage 的实例，或者一个指向兼容的图标的路径。

note

文件格式因操作系统而异。更多细节请参阅托盘 API 文档的平台考虑因素部分。

最小化到托盘

为了保持应用程序和系统托盘图标活跃，即使所有窗口都已关闭，你需要在 app 模块上有一个 window-all-closed 的事件监听器。基础的 Electron 模板通常监听此事件，但会在 Windows 和 Linux 环境下退出应用程序，以模拟标准的操作系统行为。

Setting up minimize to tray
app.on('window-all-closed', () => {
  // 让这个监听器保持活跃能够阻止应用退出
})

附加上下文菜单

你可以通过传递一个 Menu 实例到 tray.setContextMenu 函数，以将一个上下文菜单附加到 Tray 对象。

note

与常规的上下文菜单不同，Dock 上下文菜单不需要手动使用 menu.popup API。相反，托盘对象帮你处理单击事件 (尽管在 API 上存在各种与点击相关的事件以供高级使用)。

Creating a Tray menu that can quit the app
const { nativeImage } = require('electron/common')
const { app, Tray, Menu } = require('electron/main')

// 为 Tray 对象保存一个全局引用以避免被垃圾回收
let tray

// 16x16 红色圆形 data URL
const icon = nativeImage.createFromDataURL('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACTSURBVHgBpZKBCYAgEEV/TeAIjuIIbdQIuUGt0CS1gW1iZ2jIVaTnhw+Cvs8/OYDJA4Y8kR3ZR2/kmazxJbpUEfQ/Dm/UG7wVwHkjlQdMFfDdJMFaACebnjJGyDWgcnZu1/lrCrl6NCoEHJBrDwEr5NrT6ko/UV8xdLAC2N49mlc5CylpYh8wCwqrvbBGLoKGvz8Bfq0QPWEUo/EAAAAASUVORK5CYII=')

// Tray 只能在 ready 事件发生后被实例化
app.whenReady().then(() => {
  tray = new Tray(icon)
  const contextMenu = Menu.buildFromTemplate([
    { role: 'quit' }
  ])
  tray.setContextMenu(contextMenu)
})

提示

要了解更多关于 Electron 中制作菜单的信息，请参阅菜单指南。

警告

在 macOS 上，托盘上顶层菜单项的 enabled 和 visibility 属性不可用。

可运行的 Fiddle demo

下面是一个可运行的示例，在托盘的上下文菜单中添加各种菜单项，用来控制应用状态并与托盘 API 本身交互。 fiddle docs/latest/fiddles/menus/tray-menu

创建托盘图标​

最小化到托盘​

附加上下文菜单​

可运行的 Fiddle demo​

创建托盘图标

最小化到托盘

附加上下文菜单

可运行的 Fiddle demo