Electron有API來配置Windows任務(wù)欄中的應(yīng)用程序圖標(biāo)。 支持的有 創(chuàng)建一個(gè) 彈出列表, 自定義縮略圖和工具欄, 圖標(biāo)疊加, 和所謂的 "閃爍框" 效果, 而且 Electron 還使用應(yīng)用程序的 dock 圖標(biāo)來實(shí)現(xiàn)跨平臺(tái)功能 比如 最近文檔 和 應(yīng)用進(jìn)程.
彈出列表
Windows 允許應(yīng)用程序定義一個(gè)自定義上下文菜單椰棘，用戶可以看到該菜單 右鍵單擊任務(wù)欄中的應(yīng)用圖標(biāo)悲酷。 該上下文菜單被成為 彈出列表. 您可以在彈出列表的 Tasks 類別中指定自定義操作， 來自 MSDN 的引用：
應(yīng)用程序的tasks應(yīng)該是基于程序的功能和用戶能用它做一些的關(guān)鍵性事情來制定的慢洋。 任務(wù)應(yīng)當(dāng)是上下文無關(guān)的干花，因?yàn)樗恍枰绦蜻\(yùn)行就可以工作 而且他們應(yīng)該是統(tǒng)計(jì)上用戶在這個(gè)應(yīng)用上最多的行為例如: 撰寫一封郵件或者在郵件程序里打開日歷扣典，word處理程序新建一個(gè)文檔懂傀，以某一種模式啟動(dòng)應(yīng)用程序，或者是啟動(dòng)應(yīng)用程序的某些子命令犀呼。 一個(gè)應(yīng)用程序不應(yīng)當(dāng)把菜單用一些用戶不需要的高級(jí)功能的或者只會(huì)使用一次的動(dòng)作例如注冊(cè)給弄得雜亂無章幸撕。 不要將tasks功能用于廣告項(xiàng)目例如升級(jí)或者特價(jià)產(chǎn)品之類。
強(qiáng)烈推薦task列表內(nèi)容是靜態(tài)的外臂。 不管應(yīng)用程序是什么狀態(tài)或情形坐儿，它都應(yīng)該是保持不變的宋光。 盡管這個(gè)列表是動(dòng)態(tài)可變的，你應(yīng)該考慮到?jīng)]想過這個(gè)列表會(huì)變的用戶會(huì)被這個(gè)行為搞糊涂逛漫。
Internet Explorer 的 任務(wù):
不同于 macOS 的dock菜單，Windows 上的用戶任務(wù)表現(xiàn)得更像一個(gè)快捷方式赘艳，比如當(dāng)用戶點(diǎn)擊一個(gè)任務(wù)，一個(gè)程序?qū)?huì)被傳入特定的參數(shù)并且運(yùn)行阔馋。
你可以使用 app.setUserTasks API 來設(shè)置你的應(yīng)用中的用戶任務(wù)：
const { app } = require('electron')
app.setUserTasks([
{
program: process.execPath,
arguments: '--new-window',
iconPath: process.execPath,
iconIndex: 0,
title: 'New Window',
description: 'Create a new window'
}
])
調(diào)用 app.setUserTasks 并傳入空數(shù)組就可以清除你的任務(wù)列表：
const { app } = require('electron')
app.setUserTasks([])
縮略圖工具欄
在 Windows，你可以在任務(wù)欄上添加一個(gè)按鈕來當(dāng)作應(yīng)用的縮略圖工具欄娇掏。 它為用戶提供了一種訪問特定窗口命令的方式, 而無需還原或激活該窗口呕寝。
在 MSDN下梢，它的說明如下：
此工具欄只是常見的標(biāo)準(zhǔn)工具欄控件塞蹭。 它最多擁有七個(gè)按鈕番电。 每個(gè)按鈕的 ID这刷、圖像暇屋、工具提示和狀態(tài)都定義在結(jié)構(gòu)中, 然后傳遞給任務(wù)欄洞辣。 應(yīng)用程序可以根據(jù)其當(dāng)前狀態(tài)的要求, 顯示、啟用定鸟、禁用或隱藏縮略圖工具欄中的按鈕仔粥。
例如, Windows 媒體播放機(jī)可能提供標(biāo)準(zhǔn)的媒體傳輸控制, 如播放、暫停谭羔、靜音和停止麦向。
Windows Media Player 的縮略圖工具欄:
你可以使用 BrowserWindow.setThumbarButtons 來設(shè)置你的應(yīng)用的縮略圖工具欄话告。
const { BrowserWindow } = require('electron')
const path = require('path')
const win = new BrowserWindow()
win.setThumbarButtons([
{
tooltip: 'button1',
icon: path.join(__dirname, 'button1.png'),
click () { console.log('button1 clicked') }
}, {
tooltip: 'button2',
icon: path.join(__dirname, 'button2.png'),
flags: ['enabled', 'dismissonclick'],
click () { console.log('button2 clicked.') }
}
])
調(diào)用 BrowserWindow.setThumbarButtons 并傳入空數(shù)組即可清空縮略圖工具欄：
const { BrowserWindow } = require('electron')
const win = new BrowserWindow()
win.setThumbarButtons([])
任務(wù)欄中的圖標(biāo)疊加
在 Windows沙郭，任務(wù)欄按鈕可以使用小型疊加層顯示應(yīng)用程序 狀態(tài)裳朋，引用 MSDN 的文檔：
圖標(biāo)疊加作為狀態(tài)的上下文通知, 旨在否定需要一個(gè)單獨(dú)的通知區(qū)域狀態(tài)圖標(biāo)來將該信息傳達(dá)給用戶。 例如, 當(dāng)前在通知區(qū)域中顯示的 Microsoft Outlook 中的新郵件狀態(tài)現(xiàn)在可以通過任務(wù)欄按鈕上的疊加來表示鲤嫡。 同樣, 您必須在開發(fā)周期中決定哪個(gè)方法最適合您的應(yīng)用程序。 疊加圖標(biāo)用于提供重要的惕耕、長(zhǎng)期的狀態(tài)或通知, 如網(wǎng)絡(luò)狀態(tài)诫肠、messenger 狀態(tài)或新郵件区赵。 不應(yīng)向用戶顯示不斷變化的疊加或動(dòng)畫。
任務(wù)欄按鈕的疊加:
要設(shè)置窗口的疊加層圖標(biāo)，可以使用 BrowserWindow.setOverlayIcon API:
const { BrowserWindow } = require('electron')
let win = new BrowserWindow()
win.setOverlayIcon('path/to/overlay.png', 'Description for overlay')
閃爍框
在Windows上骡送，你可以突出顯示任務(wù)欄按鈕以獲得用戶的關(guān)注摔踱。 這與在macOS上彈跳停靠欄圖標(biāo)相似蛹批。 來自 MSDN 參考文檔：
通常, 會(huì)閃現(xiàn)一個(gè)窗口, 通知用戶該窗口需要注意, 但是該窗口當(dāng)前沒有鍵盤焦點(diǎn)篮愉。
要在 BrowserWindow 的任務(wù)欄按鈕突出顯示试躏，可以使用 BrowserWindow.flashFrame API:
const { BrowserWindow } = require('electron')
let win = new BrowserWindow()
win.once('focus', () => win.flashFrame(false))
win.flashFrame(true)
不要忘記調(diào)用 flashFrame 方法參數(shù)為 false 來關(guān)閉突出顯示。 在上面的示例中, 當(dāng)窗口進(jìn)入焦點(diǎn)時(shí)會(huì)調(diào)用它, 但您可能會(huì)使用超時(shí)或其他一些事件來禁用它泣刹。
