托盘属于系统级的操作，所以是在主进程中设置的。在开始之前需要注意的地方，设置托盘必须在程序ready之后。
托盘图标.png
上图就是设置后系统图标的显示效果。
1、引入系统托盘模块
import { Tray } from 'electron'
2、完整配置代码
//定义全局系统图标变量
let tray = null
app.on('ready', async () => {
tray = new Tray(path.join(__dirname, '../static/log1.png'))
const contextMenu = Menu.buildFromTemplate([
{
label: '退出',
click: function () {
app.quit()
}
}
])
tray.setToolTip('提示语')
//显示程序页面
tray.on('click', () => {
win.show()
})
tray.setContextMenu(contextMenu)
})
3、功能介绍
3.1左键功能
tray.setToolTip('提示语')来设置hover后出现的信息，一般也只设置hover的信息。如果当然软件是个视频软件，想让你hover时候显示正在播放的视频名称，那如何去做呢？这时候就需要把Electron的渲染进程与主进程进行通讯，将渲染进程的歌曲信息发送给主进程。
ipcRenderer.send('toolTipDesc', '我是提示语')
//定义全局系统图标变量
let tray = null
app.on('ready', async () => {
tray = new Tray(path.join(__dirname, '../static/log1.png'))
// 设置hover后的信息
ipcMain.on('toolTipDesc', async (_e, data) => {
tray.setToolTip(data)
})
//tray.setToolTip('提示语')
//显示程序页面
tray.on('click', () => {
win.show()
})
})
3.2右键功能
右键事件是'right-click',使用方式如下
app.on('ready', async () => {
tray = new Tray(path.join(__dirname, '../static/log1.png'))
tray.on('right-click', () =>{
//menuLIst是右键显示功能列表
tray.popUpContextMenu(menuLIst)
})
})
4、常见问题以及注意事项
4.1 图标出现后自动消失
出现这个原因是因为你的托盘变量定义有问题，需要在外定义一个全局的系统托盘变量，即可解决
let tray = null
4.2 图标不显示问题
tray = new Tray(path.join(__dirname, '../static/log1.png'))
注意最好不要把图标的地址放在src目录下，防止二次打包图标不显示。你可以在src同级目录下创建个static文件夹，把图标放在此文件夹下。还需要注意这个路径的写法。
