作者：梁棒棒
托盤(pán)雖小膜眠，作用不小言询。它是你的應(yīng)用正在操作系統(tǒng)運(yùn)行的標(biāo)識(shí)亲善，它可以通知你有新消息环戈，可以喚醒應(yīng)用界面闷板，可以設(shè)置上下文（右鍵）菜單設(shè)置更多的功能等。下面我們就來(lái)一一實(shí)現(xiàn)這些功能院塞，要在主進(jìn)程進(jìn)行操作遮晚。
1. 創(chuàng)建托盤(pán)
首先來(lái)創(chuàng)建一個(gè)托盤(pán)圖標(biāo)，簡(jiǎn)單三步即可：
- 從electron庫(kù)引入Tray類(lèi)
- 獲取圖標(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)托盤(pán)就會(huì)被創(chuàng)建出來(lái)拦止。很簡(jiǎn)單對(duì)不對(duì)县遣，但是這個(gè)圖標(biāo)現(xiàn)在還沒(méi)有任何功能，接下來(lái)我們?yōu)閳D標(biāo)添加一些屬性和事件创泄。
2. 設(shè)置托盤(pán)屬性
為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: '打開(kāi)新窗口',
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è)置了托盤(pán)根據(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)聽(tīng)事件就好了徙赢。
更多的屬性字柠、事件和方法列表請(qǐng)看官方文檔探越。
3. 示例
簡(jiǎn)單列舉幾個(gè)示例。
3.1 顯示未讀消息數(shù)(macOS)
在macOS系統(tǒng)下窑业，可以采用setTitle(String)設(shè)置未讀消息數(shù)钦幔。PS：windows下無(wú)效果。
tray.setTitle("1")
效果是這樣的：
3.2 有未讀消息時(shí)圖標(biāo)閃動(dòng)(windows)
在windows下常柄，可通過(guò)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 = true
const 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 = !toggle
if (toggle) {
tray.setImage(nativeImage.createEmpty())
} else {
tray.setImage(lightIcon)
}
}, 600)
}
3.3 雙擊托盤(pán)顯示隱藏界面(windows)
windows下效果：
附代碼：
const { Tray, BrowserWindow } = require('electron')
const path = require('path')
let tray
const 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ì)有些問(wèn)題揍庄，雙擊事件可能會(huì)失效，實(shí)際使用過(guò)程中要注意东抹，不過(guò)mac下一般也不會(huì)用到這個(gè)事件蚂子。
我們是曉黑板前端，歡迎關(guān)注我們的知乎缭黔、Segmentfault食茎、CSDN、簡(jiǎn)書(shū)馏谨、開(kāi)源中國(guó)别渔、博客園賬號(hào)。
