托盘属于系统级的操作，所以是在主进程中设置的。在开始之前需要注意的地方，设置托盘必须在程序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文件夹，把图标放在此文件夹下。还需要注意这个路径的写法。
