作者：梁棒棒

托盘虽小，作用不小。它是你的应用正在操作系统运行的标识，它可以通知你有新消息，可以唤醒应用界面，可以设置上下文（右键）菜单设置更多的功能等。下面我们就来一一实现这些功能，要在主进程进行操作。

1. 创建托盘

首先来创建一个托盘图标，简单三步即可：

  1. 从electron库引入Tray类
  2. 获取图标地址
  3. 实例化Tray并传入图标地址

代码也很简单：

  1. const { Tray } = require('electron')
  2. const path = require('path')
  4. const icon = path.join(__dirname, '你的图片路径')
  5. new Tray(icon)

一个系统托盘就会被创建出来。很简单对不对，但是这个图标现在还没有任何功能，接下来我们为图标添加一些属性和事件。

2. 设置托盘属性

为tray实例设置一些属性和事件，包括上下文菜单、鼠标移入文字。详细文档点击这里。

这里我们为tray设置灵活图标，让它可以根据系统主题显示不同的图标；再设置一个鼠标移入图标的时候会显示的提示文字，最后为它设置上下文菜单，让它可以具备一些功能。

先看下效果图：

create-tray.gif

附上代码：

  1. const { Tray, Menu, nativeTheme, BrowserWindow } = require('electron')
  2. const path = require('path')
  4. let tray
  6. // 设置顶部APP图标的操作和图标
  7. const lightIcon = path.join(__dirname, '..', '..', 'resources', 'tray', 'StatusIcon_light.png')
  8. const darkIcon = path.join(__dirname, '..', '..', 'resources', 'tray', 'StatusIcon_dark.png')
  10. // 根据系统主题显示不同的主题图标
  11. tray = new Tray(nativeTheme.shouldUseDarkColors ? darkIcon : lightIcon)
  13. tray.setToolTip('Electron-Playground')
  15. const contextMenu = Menu.buildFromTemplate([
  16.   {
  17.     label: '打开新窗口',
  18.     click: () => {
  19.       let child = new BrowserWindow({ parent: BrowserWindow.getFocusedWindow() })
  20.       child.loadURL('https://electronjs.org')
  21.       child.show()
  22.     },
  23.   },
  24.   {
  25.     label: '删除图标',
  26.     click: () => {
  27.       tray.destroy()
  28.     },
  29.   },
  30. ])
  32. // 设置上下文菜单
  33. tray.setContextMenu(contextMenu)

想亲自试一试的话点electron-playground。然后继续：

上面我们设置了托盘根据系统主题显示不同的图标，但是系统主题是动态的，又该怎么做呢，请看：

  1. nativeTheme.on('updated', () => {
  2.   tray.setImage(nativeTheme.shouldUseDarkColors ? darkIcon : lightIcon)
  3. })

添加一个主题监听事件就好了。

更多的属性、事件和方法列表请看官方文档。

3. 示例

简单列举几个示例。

3.1 显示未读消息数(macOS)

在macOS系统下，可以采用setTitle(String)设置未读消息数。PS：windows下无效果。

  1. tray.setTitle("1")

效果是这样的：
set-tray-title.png

3.2 有未读消息时图标闪动(windows)

在windows下，可通过setImage设置正常图标与空图标切换达到闪动效果。在mac系统下空图标不占用图标空间，所以需要设置透明图标。
你可以在用darkIcon代替nativeImage.createEmpty()然后执行看一下效果。

如何判断操作系统平台，点击这里

windows下效果：

create-glimmer-tray.gif

附代码：

  1. const { Tray, Menu, BrowserWindow, nativeImage } = require('electron')
  2. const path = require('path')
  4. let tray
  5. let timer
  6. let toggle = true
  7. let haveMessage = true
  9. const lightIcon = path.join(__dirname, '..', '..', 'resources', 'tray', 'StatusIcon_light.png')
  10. const darkIcon = path.join(__dirname, '..', '..', 'resources', 'tray', 'StatusIcon_dark.png')
  12. const win = BrowserWindow.getFocusedWindow();
  14. tray = new Tray(lightIcon)
  16. const contextMenu = Menu.buildFromTemplate([
  17.   {
  18.     label: '张三的消息',
  19.     click: () => {
  20.       let child = new BrowserWindow({ parent: BrowserWindow.getFocusedWindow() })
  21.       child.loadURL('https://electronjs.org')
  22.       child.show()
  23.     },
  24.   },
  25.   { type: 'separator' },
  26.   {
  27.     label: '删除图标',
  28.     click: () => {
  29.       tray.destroy()
  30.       clearInterval(timer)
  31.     },
  32.   },
  33. ])
  35. tray.setContextMenu(contextMenu)
  37. tray.setToolTip('Electron-Playground')
  39. if (haveMessage) {
  40.   timer = setInterval(() => {
  41.     toggle = !toggle
  42.     if (toggle) {
  43.       tray.setImage(nativeImage.createEmpty())
  44.     } else {
  45.       tray.setImage(lightIcon)
  46.     }
  47.   }, 600)
  48. }

3.3 双击托盘显示隐藏界面(windows)

windows下效果：

create-toggle-tray.gif

附代码：

  1. const { Tray, BrowserWindow } = require('electron')
  2. const path = require('path')
  4. let tray
  6. const lightIcon = path.join(__dirname, '..', '..', 'resources', 'tray', 'StatusIcon_light.png')
  8. const win = BrowserWindow.getFocusedWindow()
  10. tray = new Tray(lightIcon)
  12. tray.on('double-click', () => {
  13.   win.isVisible() ? win.hide() : win.show()
  14. })

注：此效果在windows上良好，在mac下会有些问题，双击事件可能会失效，实际使用过程中要注意，不过mac下一般也不会用到这个事件。