跳至主要內容

工作列自訂

概觀​

Electron 具有 API 可設定應用程式在 Windows 工作列中的圖示。此 API 支援僅限 Windows 的功能，例如建立 JumpList、自訂縮圖和工具列、圖示覆蓋，以及所謂的「閃爍框架」效果，以及跨平台的功能，例如最近的文件和應用程式進度。

JumpList​

Windows 允許應用程式定義自訂的關聯式選單，當使用者在工作列中右鍵點擊應用程式的圖示時會顯示。該關聯式選單稱為 JumpList。您可以在 JumpList 的 Tasks 類別中指定自訂動作，如 MSDN 所引述

應用程式根據程式的功能以及使用者預期會執行的主要操作來定義任務。任務應該是無上下文的，因為應用程式不需要執行即可使其運作。它們也應該是正常使用者在應用程式中執行最常見的操作，例如撰寫電子郵件訊息或開啟郵件程式中的行事曆、在文書處理器中建立新文件、以特定模式啟動應用程式或啟動其子命令之一。應用程式不應使用標準使用者不需要的進階功能或一次性動作（例如註冊）來混淆選單。請勿將任務用於促銷項目，例如升級或特別優惠。

強烈建議任務清單應為靜態。無論應用程式的狀態或狀態如何，它都應保持不變。雖然可以動態變更清單，但您應該考慮到這可能會讓不希望目的地清單的該部分變更的使用者感到困惑。

Taskbar JumpList

注意：上面的螢幕截圖是 Microsoft Edge 一般任務的範例

與 macOS 中作為真實選單的 dock 選單不同，Windows 中的使用者任務就像應用程式捷徑。例如，當使用者點擊任務時，程式將使用指定的引數執行。

若要為您的應用程式設定使用者任務，您可以使用 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 檔案中使用空陣列呼叫 app.setUserTasks。

const { app } = require('electron')

app.setUserTasks([])

注意：即使在關閉您的應用程式後，使用者任務仍會顯示，因此為任務指定的圖示和程式路徑應存在，直到您的應用程式解除安裝為止。

縮圖工具列​

在 Windows 上，您可以將具有指定按鈕的縮圖工具列新增至應用程式視窗的工作列配置。它可以讓使用者存取特定視窗的命令，而無需還原或啟用該視窗。

如 MSDN 所引述

此工具列是常見的標準工具列控制項。它最多有七個按鈕。每個按鈕的 ID、影像、工具提示和狀態都定義在一個結構中，然後傳遞到工作列。應用程式可以根據其目前狀態顯示、啟用、停用或隱藏縮圖工具列中的按鈕。

例如，Windows Media Player 可能會提供標準媒體傳輸控制項，例如播放、暫停、靜音和停止。

Thumbnail toolbar

注意：上面的螢幕截圖是 Windows Media Player 的縮圖工具列範例

若要在您的應用程式中設定縮圖工具列，您需要使用 BrowserWindow.setThumbarButtons

範例​

設定縮圖工具列​

從快速入門指南中的有效應用程式開始，使用以下程式碼更新 main.js 檔案

const { BrowserWindow, nativeImage } = require('electron')
const path = require('node:path')

const win = new BrowserWindow()

win.setThumbarButtons([
  {
    tooltip: 'button1',
    icon: nativeImage.createFromPath(path.join(__dirname, 'button1.png')),
    click () { console.log('button1 clicked') }
  }, {
    tooltip: 'button2',
    icon: nativeImage.createFromPath(path.join(__dirname, 'button2.png')),
    flags: ['enabled', 'dismissonclick'],
    click () { console.log('button2 clicked.') }
  }
])
清除縮圖工具列​

若要清除縮圖工具列按鈕，您需要在 main.js 檔案中使用空陣列呼叫 BrowserWindow.setThumbarButtons。

const { BrowserWindow } = require('electron')

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

工作列中的圖示覆蓋​

在 Windows 上，工作列按鈕可以使用小型覆蓋來顯示應用程式狀態。

如 MSDN 所引述

圖示覆蓋用作狀態的上下文通知，旨在消除對單獨的通知區域狀態圖示的需求，以將該資訊傳達給使用者。例如，Microsoft Outlook 中的新郵件狀態目前顯示在通知區域中，現在可以透過工作列按鈕上的覆蓋來指示。同樣地，您必須在開發週期中決定哪種方法最適合您的應用程式。覆蓋圖示旨在提供重要的、長期存在的狀態或通知，例如網路狀態、訊息傳遞器狀態或新郵件。使用者不應看到不斷變化的覆蓋或動畫。

Overlay on taskbar button

注意：上面的螢幕截圖是工作列按鈕上覆蓋的範例

若要設定視窗的覆蓋圖示，您需要使用 BrowserWindow.setOverlayIcon API。

範例​

從快速入門指南中的有效應用程式開始，使用以下程式碼更新 main.js 檔案

const { BrowserWindow, nativeImage } = require('electron')

const win = new BrowserWindow()

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

閃爍框架​

在 Windows 上，您可以醒目提示工作列按鈕以吸引使用者的注意。這類似於 macOS 中的彈跳 dock 圖示。

如 MSDN 所引述

通常，會閃爍視窗以通知使用者視窗需要注意，但目前沒有鍵盤焦點。

若要閃爍 BrowserWindow 工作列按鈕，您需要使用 BrowserWindow.flashFrame API。

範例​

從快速入門指南中的有效應用程式開始，使用以下程式碼更新 main.js 檔案

const { BrowserWindow } = require('electron')

const win = new BrowserWindow()

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

注意：別忘了呼叫 win.flashFrame(false) 以關閉閃爍。在上面的範例中，當視窗進入焦點時會呼叫它，但您可以使用逾時或其他事件來停用它。