保姆级别的Electron系统托盘设置介绍

这是我参与更文挑战的第9天，活动详情查看： 更文挑战

前言

我们在使用Electron开发应用常需要设置系统托盘来实现一些功能；比如我在开发音乐软件的时候需要实现音乐的后台播放，就需要设置Electron的托盘。

这里就介绍一下Electron托盘如何设置。托盘属于系统级的操作，所以是在主进程中设置的。在开始之前需要注意的地方，设置托盘必须在程序ready之后，且不使用Electron默认的窗口，并将自己设置的窗口关闭按钮设置为隐藏而不是退出。

 let win = new BrowserWindow({
        frame: false,
 })
 
 ipcMain.on('close', e =>
  win.hide()
)

在Electron设置托盘时，主要由三个部分组成：图标，左键事件，右键事件

开始

1.图标

在开始已经介绍，设置托盘必须在程序ready之后，所以，我们先判断程序是否启动，然后使用new Tray()

app.on('ready', async () => {
  if (isDevelopment && !process.env.IS_TEST) {
  }
  // 设置托盘
  const tray = new Tray('icon.png')
  // 创建渲染窗口
  createWindow()
})

这里有一个需要注意的点，托盘图标的路径最好不要在src下，因为在打包后，可能出现二次打包的情况，导致找不到图标路径的情况。所以可以在src同级下创建文件夹存放托盘图标和应用图标。

2.左键和hover

大多数的应用都需要实现，左键点击托盘图标，显示应用，hover在图标上时可以显示一些信息

app.on('ready', async () => {
  if (isDevelopment && !process.env.IS_TEST) {
  }
  // 设置托盘
  const tray = new Tray('icon.png')
  
  tray.setToolTip('Miguu')
  tray.on('click', () => {
    win.show()
  })
  // 创建渲染窗口
  createWindow()
})

可以看到，我们使用tray.setToolTip('Miguu')来设置hover后出现的信息，这里可以接收一个字符串，一般用来显示应用的名称，我这里是一个音乐软件，我想让他可以显示，正在播放的歌曲名称。

要实现这个功能需要使用Electron的渲染进程与主进程的通讯，将渲染进程的歌曲信息发送给主进程。

    ipcRenderer.send('songName', this.$store.state.songData.songName)

    ipcMain.on('songName', async (_e, data) => {
        tray.setToolTip(data)
    })

使用tray.on('click', () => {})来监听鼠标点击事件

    app.on('ready', async () => {
      if (isDevelopment && !process.env.IS_TEST) {
      }
      // 设置托盘
      const tray = new Tray('icon.png')

      // 设置hover后的信息
      ipcMain.on('songName', async (_e, data) => {
            tray.setToolTip(data)
        })
       // 设置鼠标左键事件
      tray.on('click', () => {
        win.show()
      })

      // 创建渲染窗口
      createWindow()
    })

右键列表

我们这里使用 tray.on('right-click', () =>{tray.popUpContextMenu(trayContextMenu) })来监听鼠标右键事件，使用popUpContextMenu来加载右键列表菜单

    app.on('ready', async () => {
      if (isDevelopment && !process.env.IS_TEST) {
      }
      // 设置托盘
      const tray = new Tray('icon.png')

      // 设置hover后的信息
      ipcMain.on('songName', async (_e, data) => {
            tray.setToolTip(data)
        })
      // 设置鼠标左键事件
      tray.on('click', () => {
        win.show()
      })
      // 设置鼠标右键键事件
      tray.on('right-click', () => {
        tray.popUpContextMenu(trayContextMenu)
      })

      // 创建渲染窗口
      createWindow()
    })

然后，我们就开始来编辑trayContextMenu里的内容，常用的有label、icon、click、type、role参数可以设置

const trayContextMenu = Menu.buildFromTemplate([
    {
      label: '播放/暂停       ',
      icon: 'resources/ico/play.png',
      click: () => {
        win.webContents.send('playMusic')
      }
    },
    {
      label: '下一首',
      icon: 'resources/ico/next.png',
      click: () => {
        win.webContents.send('nextMusic')
      }
    },
    {
      label: '上一首',
      icon: 'resources/ico/prev.png',
      click: () => {
        win.webContents.send('prevMusic')
      }
    },
    {
      type: 'separator'
    },
    {
      label: '退出',
      icon: 'resources/ico/quit.png',
      role: 'quit'
    }
  ])

实现效果

label

设置名称，接收一个字符串

icon

设置图标，默认在字符串前面，接收一个字符串

click

设置自定义点击事件，我们这里使用win.webContents.send向渲染进程主动通讯，进行歌曲的暂停和切换

type

设置类型，接收一个字符串，默认为normal，可设置normal、separator、submenu、checkbox 或 radio

role

设置基础点击事件，如关闭、最小化，最大化等。这些方法也可以自己实现，但Electron建议使用role来获得更高的效率。

完整代码

app.on('ready', async () => {
  if (isDevelopment && !process.env.IS_TEST) {
  }
  // 设置托盘图标
  tray = new Tray('resources/ico/ic_launcher.png')
  // 设置右键菜单列表
  const trayContextMenu = Menu.buildFromTemplate([
    {
      label: '播放/暂停       ',
      icon: 'resources/ico/play.png',
      click: () => {
        win.webContents.send('playMusic')
      }
    },
    {
      label: '下一首',
      icon: 'resources/ico/next.png',
      click: () => {
        win.webContents.send('nextMusic')
      }
    },
    {
      label: '上一首',
      icon: 'resources/ico/prev.png',
      click: () => {
        win.webContents.send('prevMusic')
      }
    },
    // 换行线
    {
      type: 'separator'
    },
    {
      label: '退出',
      icon: 'resources/ico/quit.png',
      role: 'quit'
    }
  ])
  // 监听通讯songName设置hover信息
  ipcMain.on('songName', async (_e, data) => {
    tray.setToolTip(data)
  })
  // 监听鼠标左键信息
  tray.on('click', () => {
    win.show()
  })
  // 监听鼠标右键信息
  tray.on('right-click', () => {
    tray.popUpContextMenu(trayContextMenu)
  })

  // 创建渲染窗口
  createWindow()
})

end

这里非常详细介绍了Electron托盘的常用设置，希望对有需要的朋友有所帮助。

感谢大家点开这篇文章，如果方便的话，可以点个小小的赞。

上面提到的那个咪咕音乐的项目已经在github上开源

github地址

求个star，求求了

win版下载地址 密码：0000

一个记录自己学习的专栏： 从0开始的Oasis Engine学习笔记

respect by myself