概覽

Electron 有 API 來配置 Windows 任務(wù)欄中的應(yīng)用程序圖標(biāo)。 這個(gè) API 既支持 Windows 獨(dú)有的特性也支持跨平臺(tái)特性, 比如 windows 的創(chuàng)建一個(gè) JumpList, 定制開發(fā)縮略圖和工具條,圖標(biāo)覆蓋, 和所謂的"Flash Frame" 效果, 再比如跨平臺(tái)的 最近打開過的文檔 和 程序執(zhí)行進(jìn)度條等特性.

彈出列表

Windows 允許應(yīng)用程序自定義一個(gè)菜單欄，當(dāng)用戶右鍵單擊任務(wù)欄中的應(yīng)用圖標(biāo)及可顯示該列表。 該上下文菜單被稱為 JumpList。 根據(jù) MSDN 敘述，你應(yīng)該從 JumpList 的 Tasks 分類中指定自定義動(dòng)作。

應(yīng)用程序的“任務(wù)”列表的制定是基于程序的功能，用戶能用它做一些快捷操作。 任務(wù)應(yīng)當(dāng)是與上下文無關(guān)的，因?yàn)樗恍枰绦蜻\(yùn)行就可以工作。 而且據(jù)統(tǒng)計(jì)，它們應(yīng)該是用戶在這個(gè)應(yīng)用上使用最多的操作，例如: 撰寫一封郵件或者在郵件程序里打開日歷，word處理程序新建一個(gè)文檔，以某一種模式啟動(dòng)應(yīng)用程序，或者是啟動(dòng)應(yīng)用程序的某些子命令。 一個(gè)應(yīng)用程序不應(yīng)當(dāng)定義一些用戶不需要的高級(jí)功能的或者只會(huì)使用一次的操作的菜單，以防止將菜單弄得雜亂無章，例如注冊(cè)。 不要將“任務(wù)”功能用于廣告操作，例如升級(jí)應(yīng)用或者推廣特價(jià)產(chǎn)品等等。

強(qiáng)烈推薦“任務(wù)”列表內(nèi)容是靜態(tài)的。 不管什么情形，也不管應(yīng)用程序是什么狀態(tài)，它都應(yīng)該是保持不變的。 盡管這個(gè)列表是動(dòng)態(tài)可變的，你應(yīng)該注意，那些沒想過這個(gè)列表會(huì)變的用戶會(huì)被這個(gè)行為搞糊涂。

注意: 上面的截圖是Microsoft Edge的任務(wù)欄示例

MacOS里的docker menu是菜單項(xiàng)，然而windows里的user tasks只是一個(gè)快捷方式。 舉個(gè)栗子，當(dāng)用戶點(diǎn)擊task的時(shí)候，程序?qū)?huì)執(zhí)行特定的參數(shù)。

你可以使用 app.setUserTasks API 來設(shè)置你的應(yīng)用中的用戶任務(wù).

示例?

設(shè)置用戶任務(wù)

按照 快速入門 啟動(dòng)一個(gè)應(yīng)用, 使用下面的代碼更新 main.js 文件:

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'
  }
])

清空任務(wù)列表

要想清除任務(wù)列表, 你需要在 main.js 文件內(nèi)調(diào)用 app.setUserTasks 方法, 參數(shù)是空數(shù)組即可

const { app } = require('electron')

app.setUserTasks([])

注意：即使你的應(yīng)用關(guān)閉，用戶任務(wù)仍然會(huì)被顯示，因此在你的應(yīng)用被卸載之前，任務(wù)的圖標(biāo)和程序的路徑必須是存在的。

縮略圖工具欄?

在 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 媒體播放器的縮略圖工具欄示例

要在應(yīng)用程序中設(shè)置縮略圖工具欄，可以使用 BrowserWindow.setThumbarButtons

示例?

設(shè)置縮略圖工具欄

按照 快速入門 啟動(dòng)一個(gè)應(yīng)用, 使用下面的代碼更新 main.js 文件:

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.') }
  }
])

清除縮略圖工具欄

要清除縮略圖工具欄按鈕，您需要在 main.js 文件調(diào)用 BrowserWindow.setThumbaritons 函數(shù)設(shè)置為空數(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)用于提供重要的、長期的狀態(tài)或通知, 如網(wǎng)絡(luò)狀態(tài)、messenger 狀態(tài)或新郵件。 不應(yīng)向用戶顯示不斷變化的疊加或動(dòng)畫。

注：上面的屏幕截圖是任務(wù)欄按鈕疊加的示例

你可以使用 BrowserWindow.setOverlayIcon API來設(shè)置窗口的疊加層圖標(biāo)

示例

按照 快速入門 啟動(dòng)一個(gè)應(yīng)用, 使用下面的代碼更新 main.js 文件:

const { BrowserWindow } = require('electron')

const win = new BrowserWindow()

win.setOverlayIcon('path/to/overlay.png', 'Description for overlay')

閃爍框?

在Windows上，你可以突出顯示任務(wù)欄按鈕以獲得用戶的關(guān)注。 這與在 macOS 上 dock 彈跳圖標(biāo)相似。

引自 MSDN：

通常, 會(huì)閃現(xiàn)一個(gè)窗口, 通知用戶該窗口需要注意, 但是該窗口當(dāng)前沒有鍵盤焦點(diǎn)。

想要刷新 BrowserWindow 任務(wù)欄按鈕, 你可以使用 BrowserWindow.flashFrame API.

示例

按照 快速入門 啟動(dòng)一個(gè)應(yīng)用, 使用下面的代碼更新 main.js 文件:

const { BrowserWindow } = require('electron')

const win = new BrowserWindow()

win.once('focus', () => win.flashFrame(false))
win.flashFrame(true)

注意：別忘了調(diào)用 ?win.flashFramework(false)? 來關(guān)閉閃爍。 在上面的示例中, 當(dāng)窗口進(jìn)入焦點(diǎn)時(shí)會(huì)調(diào)用它, 但您可能會(huì)使用超時(shí)或其他一些事件來禁用它。