使用 Electron 將應用程序放入托盤

使用 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 支持, 謝謝.