作者:梁棒棒
托盘虽小,作用不小。它是你的应用正在操作系统运行的标识,它可以通知你有新消息,可以唤醒应用界面,可以设置上下文(右键)菜单设置更多的功能等。下面我们就来一一实现这些功能,要在主进程进行操作。
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 = true
const 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 = !toggle
if (toggle) {
tray.setImage(nativeImage.createEmpty())
} else {
tray.setImage(lightIcon)
}
}, 600)
}
3.3 双击托盘显示隐藏界面(windows)
windows下效果:
附代码:
const { Tray, BrowserWindow } = require('electron')
const path = require('path')
let tray
const 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下一般也不会用到这个事件。
我们是晓黑板前端,欢迎关注我们的知乎、Segmentfault、CSDN、、开源中国、博客园账号。