编写脚本隐藏托盘图标_【Electron-Playground系列】托盘篇

作者：梁棒棒
electron-playground 地址：tal-tech/electron-playground

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

1. 创建托盘

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

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

代码也很简单：

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

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

2. 设置托盘属性

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

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

先看下效果图：

附上代码：

const { Tray, Menu, nativeTheme, BrowserWindow } = require('electron')
const path = require('path')let tray// 设置顶部APP图标的操作和图标
const lightIcon = path.join(__dirname, '..', '..', 'resources', 'tray', 'StatusIcon_light.png')
const darkIcon = path.join(__dirname, '..', '..', 'resources', 'tray', 'StatusIcon_dark.png')// 根据系统主题显示不同的主题图标
tray = new Tray(nativeTheme.shouldUseDarkColors ? darkIcon : lightIcon)tray.setToolTip('Electron-Playground')const contextMenu = Menu.buildFromTemplate([{label: '打开新窗口',click: () => {let child = new BrowserWindow({ parent: BrowserWindow.getFocusedWindow() })child.loadURL('https://electronjs.org')child.show()},},{label: '删除图标',click: () => {tray.destroy()},},
])// 设置上下文菜单
tray.setContextMenu(contextMenu)

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

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

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

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

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

3. 示例

简单列举几个示例。

3.1 显示未读消息数(macOS)

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

tray.setTitle("1")

效果是这样的：

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

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

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

windows下效果：

附代码：

const { Tray, Menu, BrowserWindow, nativeImage } = require('electron')
const path = require('path')let tray
let timer
let toggle = true
let haveMessage = trueconst lightIcon = path.join(__dirname, '..', '..', 'resources', 'tray', 'StatusIcon_light.png')
const darkIcon = path.join(__dirname, '..', '..', 'resources', 'tray', 'StatusIcon_dark.png')const win = BrowserWindow.getFocusedWindow();tray = new Tray(lightIcon)const contextMenu = Menu.buildFromTemplate([{label: '张三的消息',click: () => {let child = new BrowserWindow({ parent: BrowserWindow.getFocusedWindow() })child.loadURL('https://electronjs.org')child.show()},},{ type: 'separator' },{label: '删除图标',click: () => {tray.destroy()clearInterval(timer)},},
])tray.setContextMenu(contextMenu)tray.setToolTip('Electron-Playground')if (haveMessage) {timer = setInterval(() => {toggle = !toggleif (toggle) {tray.setImage(nativeImage.createEmpty())} else {tray.setImage(lightIcon)}}, 600)
}

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

windows下效果：

附代码：

const { Tray, BrowserWindow } = require('electron')
const path = require('path')let trayconst lightIcon = path.join(__dirname, '..', '..', 'resources', 'tray', 'StatusIcon_light.png')const win = BrowserWindow.getFocusedWindow()tray = new Tray(lightIcon)tray.on('double-click', () => {win.isVisible() ? win.hide() : win.show()
})

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

项目的地址传送门：

https://github.com/tal-tech/electron-playgroundgithub.com

为了能更好学习electron，我们目前创作了一个系列，有兴趣可以看看

晓黑板前端技术：【Electron-Playground系列】菜单篇zhuanlan.zhihu.com

晓黑板前端技术：【Electron-Playground系列】托盘篇zhuanlan.zhihu.com

晓黑板前端技术：【Electron-Playground系列】自定义协议篇zhuanlan.zhihu.com

晓黑板前端技术：【Electron-Playground系列】Dialog与文件选择篇zhuanlan.zhihu.com

如果想看更完整的文档，请参考下面文档

electron-playground文档 · 语雀www.yuque.com