Windows 任务栏

Windows 任务栏

概览

Electron有API来配置Windows任务栏中的应用程序图标。 This API supports both Windows-only features like creation of a JumpList, custom thumbnails and toolbars, icon overlays, and the so-called “Flash Frame” effect, and cross-platform features like recent documents and application progress.

Windows allows apps to define a custom context menu that shows up when users right-click the app’s icon in the taskbar. 该上下文菜单被成为 弹出列表. You specify custom actions in the Tasks category of JumpList, as quoted from MSDN:

应用程序的“任务”列表的制定是基于程序的功能，用户能用它做一些快捷操作。任务应当是与上下文无关的，因为它不需要程序运行就可以工作。而且据统计，它们应该是用户在这个应用上使用最多的操作，例如: 撰写一封邮件或者在邮件程序里打开日历，word处理程序新建一个文档，以某一种模式启动应用程序，或者是启动应用程序的某些子命令。一个应用程序不应当定义一些用户不需要的高级功能的或者只会使用一次的操作的菜单，以防止将菜单弄得杂乱无章，例如注册。不要将“任务”功能用于广告操作，例如升级应用或者推广特价产品等等。

强烈推荐“任务”列表内容是静态的。不管什么情形，也不管应用程序是什么状态，它都应该是保持不变的。尽管这个列表是动态可变的，你应该注意，那些没想过这个列表会变的用户会被这个行为搞糊涂。

NOTE: The screenshot above is an example of general tasks of Internet Explorer

Unlike the dock menu in macOS which is a real menu, user tasks in Windows work like application shortcuts. For example, when a user clicks a task, the program will be executed with specified arguments.

To set user tasks for your application, you can use app.setUserTasks API.

示例

Set user tasks

Starting with a working application from the Quick Start Guide, update the main.js file with the following lines:

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

Clear tasks list

To clear your tasks list, you need to call app.setUserTasks with an empty array in the main.js file.

const { app } = require('electron')
app.setUserTasks([])

NOTE: The user tasks will still be displayed even after closing your application, so the icon and program path specified for a task should exist until your application is uninstalled.

缩略图工具栏

On Windows, you can add a thumbnail toolbar with specified buttons to a taskbar layout of an application window. It provides users with a way to access a particular window’s command without restoring or activating the window.

As quoted from MSDN:

此工具栏只是常见的标准工具栏控件。它最多拥有七个按钮。每个按钮的 ID、图像、工具提示和状态都定义在结构中, 然后传递给任务栏。应用程序可以根据其当前状态的要求, 显示、启用、禁用或隐藏缩略图工具栏中的按钮。

例如, Windows 媒体播放机可能提供标准的媒体传输控制, 如播放、暂停、静音和停止。

NOTE: The screenshot above is an example of thumbnail toolbar of Windows Media Player

To set thumbnail toolbar in your application, you need to use BrowserWindow.setThumbarButtons

示例

Set thumbnail toolbar

Starting with a working application from the Quick Start Guide, update the main.js file with the following lines:

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

Clear thumbnail toolbar

To clear thumbnail toolbar buttons, you need to call BrowserWindow.setThumbarButtons with an empty array in the main.js file.

const { BrowserWindow } = require('electron')
const win = new BrowserWindow()
win.setThumbarButtons([])

任务栏中的图标叠加

On Windows, a taskbar button can use a small overlay to display application status.

As quoted from MSDN:

图标叠加作为状态的上下文通知, 旨在否定需要一个单独的通知区域状态图标来将该信息传达给用户。例如, 当前在通知区域中显示的 Microsoft Outlook 中的新邮件状态现在可以通过任务栏按钮上的叠加来表示。同样, 您必须在开发周期中决定哪个方法最适合您的应用程序。叠加图标用于提供重要的、长期的状态或通知, 如网络状态、messenger 状态或新邮件。不应向用户显示不断变化的叠加或动画。

NOTE: The screenshot above is an example of overlay on a taskbar button

To set the overlay icon for a window, you need to use the BrowserWindow.setOverlayIcon API.

示例

Starting with a working application from the Quick Start Guide, update the main.js file with the following lines:

const { BrowserWindow } = require('electron')
const win = new BrowserWindow()
win.setOverlayIcon('path/to/overlay.png', 'Description for overlay')

闪烁框

On Windows, you can highlight the taskbar button to get the user’s attention. This is similar to bouncing the dock icon in macOS.

As quoted from MSDN:

通常, 会闪现一个窗口, 通知用户该窗口需要注意, 但是该窗口当前没有键盘焦点。

To flash the BrowserWindow taskbar button, you need to use the BrowserWindow.flashFrame API.

示例

Starting with a working application from the Quick Start Guide, update the main.js file with the following lines:

const { BrowserWindow } = require('electron')
const win = new BrowserWindow()
win.once('focus', () => win.flashFrame(false))
win.flashFrame(true)

NOTE: Don’t forget to call win.flashFrame(false) to turn off the flash. In the above example, it is called when the window comes into focus, but you might use a timeout or some other event to disable it.

自定义 Windows 任务栏