electron系统托盘

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