Electron 任務欄自定義

概覽

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

彈出列表

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

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

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

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

MacOS里的docker menu是菜單項，然而windows里的user tasks只是一個快捷方式。 舉個栗子，當用戶點擊task的時候，程序?qū)?zhí)行特定的參數(shù)。

你可以使用 app.setUserTasks API 來設置你的應用中的用戶任務.

示例?

設置用戶任務

按照 快速入門 啟動一個應用, 使用下面的代碼更新 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'
  }
])

清空任務列表

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

const { app } = require('electron')

app.setUserTasks([])

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

縮略圖工具欄?

在 Windows，你可以在任務欄上添加一個按鈕來當作應用的縮略圖工具欄。 它為用戶提供了一種訪問特定窗口命令的方式, 而無需還原或激活該窗口。

引自 MSDN：

此工具欄只是常見的標準工具欄控件。 它最多擁有七個按鈕。 每個按鈕的 ID、圖像、工具提示和狀態(tài)都定義在結(jié)構(gòu)中, 然后傳遞給任務欄。 應用程序可以根據(jù)其當前狀態(tài)的要求, 顯示、啟用、禁用或隱藏縮略圖工具欄中的按鈕。

例如, Windows 媒體播放機可能提供標準的媒體傳輸控制, 如播放、暫停、靜音和停止。

注：上面的屏幕截圖是 Windows 媒體播放器的縮略圖工具欄示例

要在應用程序中設置縮略圖工具欄，可以使用 BrowserWindow.setThumbarButtons

示例?

設置縮略圖工具欄

按照 快速入門 啟動一個應用, 使用下面的代碼更新 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ù)組。

const { BrowserWindow } = require('electron')

const win = new BrowserWindow()
win.setThumbarButtons([])

任務欄中的圖標疊加?

在 Windows，任務欄按鈕可以使用小型疊加層顯示應用程序狀態(tài)。

引自 MSDN：

圖標疊加作為狀態(tài)的上下文通知, 旨在否定需要一個單獨的通知區(qū)域狀態(tài)圖標來將該信息傳達給用戶。 例如, 當前在通知區(qū)域中顯示的 Microsoft Outlook 中的新郵件狀態(tài)現(xiàn)在可以通過任務欄按鈕上的疊加來表示。 同樣, 您必須在開發(fā)周期中決定哪個方法最適合您的應用程序。 疊加圖標用于提供重要的、長期的狀態(tài)或通知, 如網(wǎng)絡狀態(tài)、messenger 狀態(tài)或新郵件。 不應向用戶顯示不斷變化的疊加或動畫。

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

你可以使用 BrowserWindow.setOverlayIcon API來設置窗口的疊加層圖標

示例

按照 快速入門 啟動一個應用, 使用下面的代碼更新 main.js 文件:

const { BrowserWindow } = require('electron')

const win = new BrowserWindow()

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

閃爍框?

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

引自 MSDN：

通常, 會閃現(xiàn)一個窗口, 通知用戶該窗口需要注意, 但是該窗口當前沒有鍵盤焦點。

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

示例

按照 快速入門 啟動一個應用, 使用下面的代碼更新 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)閉閃爍。 在上面的示例中, 當窗口進入焦點時會調(diào)用它, 但您可能會使用超時或其他一些事件來禁用它。