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

托盤雖小，作用不小。它是你的應(yīng)用正在操作系統(tǒng)運(yùn)行的標(biāo)識(shí)，它可以通知你有新消息，可以喚醒應(yīng)用界面，可以設(shè)置上下文（右鍵）菜單設(shè)置更多的功能等。下面我們就來一一實(shí)現(xiàn)這些功能，要在主進(jìn)程進(jìn)行操作。

1. 創(chuàng)建托盤

首先來創(chuàng)建一個(gè)托盤圖標(biāo)，簡(jiǎn)單三步即可：

從electron庫引入Tray類

獲取圖標(biāo)地址

實(shí)例化Tray并傳入圖標(biāo)地址

代碼也很簡(jiǎn)單：

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

一個(gè)系統(tǒng)托盤就會(huì)被創(chuàng)建出來。很簡(jiǎn)單對(duì)不對(duì)，但是這個(gè)圖標(biāo)現(xiàn)在還沒有任何功能，接下來我們?yōu)閳D標(biāo)添加一些屬性和事件。

2. 設(shè)置托盤屬性

為tray實(shí)例設(shè)置一些屬性和事件，包括上下文菜單、鼠標(biāo)移入文字。詳細(xì)文檔點(diǎn)擊這里。

這里我們?yōu)閠ray設(shè)置靈活圖標(biāo)，讓它可以根據(jù)系統(tǒng)主題顯示不同的圖標(biāo)；再設(shè)置一個(gè)鼠標(biāo)移入圖標(biāo)的時(shí)候會(huì)顯示的提示文字，最后為它設(shè)置上下文菜單，讓它可以具備一些功能。

先看下效果圖：

附上代碼：

const { Tray, Menu, nativeTheme, BrowserWindow } = require('electron') const path = require('path')let tray// 設(shè)置頂部APP圖標(biāo)的操作和圖標(biāo) const lightIcon = path.join(__dirname, '..', '..', 'resources', 'tray', 'StatusIcon_light.png') const darkIcon = path.join(__dirname, '..', '..', 'resources', 'tray', 'StatusIcon_dark.png')// 根據(jù)系統(tǒng)主題顯示不同的主題圖標(biāo) 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: '刪除圖標(biāo)',click: () => {tray.destroy()},}, ])// 設(shè)置上下文菜單 tray.setContextMenu(contextMenu)

想親自試一試的話點(diǎn)electron-playground。然后繼續(xù)：

上面我們?cè)O(shè)置了托盤根據(jù)系統(tǒng)主題顯示不同的圖標(biāo)，但是系統(tǒng)主題是動(dòng)態(tài)的，又該怎么做呢，請(qǐng)看：

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

添加一個(gè)主題監(jiān)聽事件就好了。

更多的屬性、事件和方法列表請(qǐng)看官方文檔。

3. 示例

簡(jiǎn)單列舉幾個(gè)示例。

3.1 顯示未讀消息數(shù)(macOS)

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

tray.setTitle("1")

效果是這樣的：

3.2 有未讀消息時(shí)圖標(biāo)閃動(dòng)(windows)

在windows下，可通過setImage設(shè)置正常圖標(biāo)與空?qǐng)D標(biāo)切換達(dá)到閃動(dòng)效果。在mac系統(tǒng)下空?qǐng)D標(biāo)不占用圖標(biāo)空間，所以需要設(shè)置透明圖標(biāo)。 你可以在用darkIcon代替nativeImage.createEmpty()然后執(zhí)行看一下效果。

如何判斷操作系統(tǒng)平臺(tái)，點(diǎn)擊這里

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: '刪除圖標(biāo)',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下會(huì)有些問題，雙擊事件可能會(huì)失效，實(shí)際使用過程中要注意，不過mac下一般也不會(huì)用到這個(gè)事件。

項(xiàng)目的地址傳送門：

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

為了能更好學(xué)習(xí)electron，我們目前創(chuàng)作了一個(gè)系列，有興趣可以看看

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

如果想看更完整的文檔，請(qǐng)參考下面文檔

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。