运用 Electron 将运用程序放入托盘

此系列文章的运用示例已宣布于 GitHub: electron-api-demos-Zh_CN. 能够 Clone 或下载后运转检察. 迎接 Star .

运用 tray 模块许可您在操作系统的关照区域中建立图标.

此图标还能够附加上下文菜单.

在浏览器中检察 完全 API 文档 .

托盘

支撑: Win, macOS, Linux | 历程: Main

示例按钮运用 ipc 模块向主历程发送音讯. 在主历程中, 运用程序会被示知在托盘中安排一个带有上下文菜单的图标.

在此示例中, 能够经由过程单击托盘图标上下文菜单中的 “移除” 或再次点击示例按钮来删除托盘图标.

主历程

const path = require('path')
const electron = require('electron')
const ipc = electron.ipcMain
const app = electron.app
const Menu = electron.Menu
const Tray = electron.Tray

let appIcon = null

ipc.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').ipcRenderer

const trayBtn = document.getElementById('put-in-tray')
let trayOn = false

trayBtn.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 上运用托盘的更多详细信息请检察 完全 API 文档 .

假如这边文章对您有协助, 感谢 下方点赞 或 Star GitHub: electron-api-demos-Zh_CN 支撑, 感谢.