作者：梁棒棒
electron-playground 地址：tal-tech/electron-playground

托盤雖小，作用不小。它是你的應用正在操作系統運行的標識，它可以通知你有新消息，可以喚醒應用界面，可以設置上下文（右鍵）菜單設置更多的功能等。下面我們就來一一實現這些功能，要在主進程進行操作。

1. 創建托盤

首先來創建一個托盤圖標，簡單三步即可：

從electron庫引入Tray類

獲取圖標地址

實例化Tray并傳入圖標地址

代碼也很簡單：

const { Tray } = require('electron') const path = require('path')const icon = path.join(__dirname, '你的圖片路徑') new Tray(icon)

一個系統托盤就會被創建出來。很簡單對不對，但是這個圖標現在還沒有任何功能，接下來我們為圖標添加一些屬性和事件。

2. 設置托盤屬性

為tray實例設置一些屬性和事件，包括上下文菜單、鼠標移入文字。詳細文檔點擊這里。

這里我們為tray設置靈活圖標，讓它可以根據系統主題顯示不同的圖標；再設置一個鼠標移入圖標的時候會顯示的提示文字，最后為它設置上下文菜單，讓它可以具備一些功能。

先看下效果圖：

附上代碼：

const { Tray, Menu, nativeTheme, BrowserWindow } = require('electron') const path = require('path')let tray// 設置頂部APP圖標的操作和圖標 const lightIcon = path.join(__dirname, '..', '..', 'resources', 'tray', 'StatusIcon_light.png') const darkIcon = path.join(__dirname, '..', '..', 'resources', 'tray', 'StatusIcon_dark.png')// 根據系統主題顯示不同的主題圖標 tray = new Tray(nativeTheme.shouldUseDarkColors ? darkIcon : lightIcon)tray.setToolTip('Electron-Playground')const contextMenu = Menu.buildFromTemplate([{label: '打開新窗口',click: () => {let child = new BrowserWindow({ parent: BrowserWindow.getFocusedWindow() })child.loadURL('https://electronjs.org')child.show()},},{label: '刪除圖標',click: () => {tray.destroy()},}, ])// 設置上下文菜單 tray.setContextMenu(contextMenu)

想親自試一試的話點electron-playground。然后繼續：

上面我們設置了托盤根據系統主題顯示不同的圖標，但是系統主題是動態的，又該怎么做呢，請看：

nativeTheme.on('updated', () => {tray.setImage(nativeTheme.shouldUseDarkColors ? darkIcon : lightIcon) })

添加一個主題監聽事件就好了。

更多的屬性、事件和方法列表請看官方文檔。

3. 示例

簡單列舉幾個示例。

3.1 顯示未讀消息數(macOS)

在macOS系統下，可以采用setTitle(String)設置未讀消息數。PS：windows下無效果。

tray.setTitle("1")

效果是這樣的：

3.2 有未讀消息時圖標閃動(windows)

在windows下，可通過setImage設置正常圖標與空圖標切換達到閃動效果。在mac系統下空圖標不占用圖標空間，所以需要設置透明圖標。 你可以在用darkIcon代替nativeImage.createEmpty()然后執行看一下效果。

如何判斷操作系統平臺，點擊這里

windows下效果：

附代碼：

const { Tray, Menu, BrowserWindow, nativeImage } = require('electron') const path = require('path')let tray let timer let toggle = true let haveMessage = trueconst lightIcon = path.join(__dirname, '..', '..', 'resources', 'tray', 'StatusIcon_light.png') const darkIcon = path.join(__dirname, '..', '..', 'resources', 'tray', 'StatusIcon_dark.png')const win = BrowserWindow.getFocusedWindow();tray = new Tray(lightIcon)const contextMenu = Menu.buildFromTemplate([{label: '張三的消息',click: () => {let child = new BrowserWindow({ parent: BrowserWindow.getFocusedWindow() })child.loadURL('https://electronjs.org')child.show()},},{ type: 'separator' },{label: '刪除圖標',click: () => {tray.destroy()clearInterval(timer)},}, ])tray.setContextMenu(contextMenu)tray.setToolTip('Electron-Playground')if (haveMessage) {timer = setInterval(() => {toggle = !toggleif (toggle) {tray.setImage(nativeImage.createEmpty())} else {tray.setImage(lightIcon)}}, 600) }

3.3 雙擊托盤顯示隱藏界面(windows)

windows下效果：

附代碼：

const { Tray, BrowserWindow } = require('electron') const path = require('path')let trayconst lightIcon = path.join(__dirname, '..', '..', 'resources', 'tray', 'StatusIcon_light.png')const win = BrowserWindow.getFocusedWindow()tray = new Tray(lightIcon)tray.on('double-click', () => {win.isVisible() ? win.hide() : win.show() })

注：此效果在windows上良好，在mac下會有些問題，雙擊事件可能會失效，實際使用過程中要注意，不過mac下一般也不會用到這個事件。

項目的地址傳送門：

https://github.com/tal-tech/electron-playground?github.com

為了能更好學習electron，我們目前創作了一個系列，有興趣可以看看

曉黑板前端技術：【Electron-Playground系列】菜單篇?zhuanlan.zhihu.com曉黑板前端技術：【Electron-Playground系列】托盤篇?zhuanlan.zhihu.com曉黑板前端技術：【Electron-Playground系列】自定義協議篇?zhuanlan.zhihu.com曉黑板前端技術：【Electron-Playground系列】Dialog與文件選擇篇?zhuanlan.zhihu.com

如果想看更完整的文檔，請參考下面文檔

electron-playground文檔 · 語雀?www.yuque.com

總結

以上是生活随笔為你收集整理的编写脚本隐藏托盘图标_【Electron-Playground系列】托盘篇的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。