使用 Electron 将应用程序放入托盘

此系列文章的应用示例已发布于 . 可以 Clone 或下载后运行查看. 欢迎 Star .

使用 tray 模块允许您在操作系统的通知区域中创建图标.

此图标还可以附加上下文菜单.

在浏览器中查看 .

托盘

支持: Win, macOS, Linux | 进程: Main

示例按钮使用 ipc 模块向主进程发送消息. 在主进程中, 应用程序会被告知在托盘中放置一个带有上下文菜单的图标.

在此示例中, 可以通过单击托盘图标上下文菜单中的 "移除" 或再次点击示例按钮来删除托盘图标.

主进程

const path = require('path')const electron = require('electron')const ipc = electron.ipcMainconst app = electron.appconst Menu = electron.Menuconst Tray = electron.Traylet appIcon = nullipc.on('put-in-tray', function (event) {  const iconName = process.platform === 'win32' ? 'windows-icon.png' : 'iconTemplate.png'  const iconPath = path.join(__dirname, iconName)  appIcon = new Tray(iconPath)  const contextMenu = Menu.buildFromTemplate([{    label: '移除',    click: function () {      event.sender.send('tray-removed')    }  }])  appIcon.setToolTip('在托盘中的 Electron 示例.')  appIcon.setContextMenu(contextMenu)})ipc.on('remove-tray', function () {  appIcon.destroy()})app.on('window-all-closed', function () {  if (appIcon) appIcon.destroy()})

渲染器进程

const ipc = require('electron').ipcRendererconst trayBtn = document.getElementById('put-in-tray')let trayOn = falsetrayBtn.addEventListener('click', function (event) {  if (trayOn) {    trayOn = false    document.getElementById('tray-countdown').innerHTML = ''    ipc.send('remove-tray')  } else {    trayOn = true    const message = '再次点击示例按钮移除托盘.'    document.getElementById('tray-countdown').innerHTML = message    ipc.send('put-in-tray')  }})// 从图标上下文菜单中删除托盘ipc.on('tray-removed', function () {  ipc.send('remove-tray')  trayOn = false  document.getElementById('tray-countdown').innerHTML = ''})

高级技巧

Linux中的托盘支持.

在只有应用程序指示器支持的 Linux 发行版上，用户需要安装 libappindicator1 来使托盘图标正常工作. 有关在 Linux 上使用托盘的更多详细信息请查看 .

如果这边文章对您有帮助, 感谢 下方点赞 或 Star 支持, 谢谢.