ElectronJS 中的 Windows 任务栏操作

ElectronJS是一个开源框架，用于使用能够在 Windows、macOS 和 Linux 操作系统上运行的 HTML、CSS 和 JavaScript 等 Web 技术构建跨平台原生桌面应用程序。它将 Chromium 引擎和NodeJS 组合成一个单一的运行时。

根据官方定义，任务栏是位于屏幕底部的操作系统元素。它允许我们通过“开始”菜单定位和启动程序，或查看当前打开的任何程序。任务栏的右侧是通知区域，它允许我们检查日期和时间、后台运行的项目等。Windows操作系统平台上支持的所有现代桌面应用程序都可以与此 Windows 任务栏交互。一些更常见的任务栏操作包括在原始图标上显示覆盖层或闪烁应用程序的图标以通知用户。 Electron 还为我们提供了一种使用BrowserWindow对象的 Instance 方法与此 Windows 任务栏交互的方式。本教程将演示 Electron 中这些常见的 Windows 任务栏操作。有关 Electron 如何与通知区域交互的更多信息，请参阅文章： ElectronJS 中的自定义通知。更复杂的 Windows 任务栏操作，例如显示应用程序的自定义缩略图工具栏等，将在单独的文章中介绍。

我们假设您熟悉上述链接中介绍的先决条件。为了让 Electron 正常工作，需要在系统中预装node和npm 。

• 项目结构：

示例：按照ElectronJS中桌面操作中给出的步骤设置基本的 Electron 应用程序。复制文章中提供的main.js文件和index.html文件的样板代码。此外，执行package.json文件中提到的必要更改以启动电子应用程序。我们将继续使用相同的代码库构建我们的应用程序。设置 Electron 应用程序所需的基本步骤保持不变。根据项目结构创建资产文件夹。此资产的文件夹将包含image.png文件，该文件将用作窗口任务栏的覆盖图像。在本教程中，我们使用 Electron 徽标作为image.png文件。
包.json：

{
  "name": "electron-taskbar",
  "version": "1.0.0",
  "description": "Windows Taskbar Operations in Electron",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "keywords": [
    "electron"
  ],
  "author": "Radhesh Khanna",
  "license": "ISC",
  "dependencies": {
    "electron": "^8.3.0"
  }
}

输出：

Electron 中的 Windows 任务栏操作： BrowserWindow实例是Main Process 的一部分。为了在Renderer Process 中导入和使用BrowserWindow ，我们将使用 Electron远程模块。如上所述，两种最常见的 Windows 任务栏操作是图标叠加和闪烁的图标效果。我们将通过代码详细介绍这两种操作。

Windows 任务栏中的图标叠加

• 根据官方 MSDN：

“Icon overlays serve as a contextual notification of status and are intended to negate the need for a separate notification area status icon to communicate that information to the user. For instance, the new mail status in Microsoft Outlook, currently shown in the notification area, can now be indicated through an overlay on the taskbar button. Again, you must decide during your development cycle which method is best for your application. Overlay icons are intended to supply important, long-standing status or notifications such as network status, messenger status, or new mail. The user should not be presented with constantly changing overlays or animations.”

在 Electron 中，我们可以使用一个小的覆盖图标来设置原来的应用程序图标。这可用于显示应用程序状态并可进行相应更改。当 Electron 应用程序最初启动时，它会在 Windows 任务栏中显示一个应用程序图标，如下所示：

• index.js ：在该文件中添加以下代码段。

javascript

const electron = require('electron')
const path = require('path');
  
// Import BrowserWindow using Electron remote
const BrowserWindow = electron.remote.BrowserWindow;
let win = BrowserWindow.getFocusedWindow();
  
win.setOverlayIcon(
      path.join(__dirname, '../assets/image.png'), 'Overlay Icon Description');
  
setTimeout(() => {
    win.setOverlayIcon(null, '');
}, 5000);

说明： BrowserWindow对象的win.setOverlayIcon(overlay, description) Instance 方法仅在 Windows 操作系统中受支持。调用此 Instance 方法时设置一个 16 x 当前任务栏图标上的 16 像素覆盖图像。如上所述，它通常用于传达某种应用程序状态或被动通知用户。此 Instance 方法没有返回类型。它接受以下参数：

• overlay: NativeImage该参数表示在 Windows 任务栏中应用程序图标右下角显示的NativeImage图标。如果此参数设置为null ，则覆盖图标将被清除。 NativeImage Instance 是专门为 Electron 应用程序设计的，用于使用PNG或JPG文件创建系统托盘、停靠栏、任务栏和应用程序图标。
• description: String此参数提供了将提供给辅助功能屏幕阅读器的覆盖图标的描述。从任务栏图标清除覆盖层时，可以将空字符串值传递给此参数。

在上面的代码中，我们使用了NodeJS路径模块的path.join()方法从资产文件夹中获取image.png文件。我们还使用了setTimeout()函数来模拟5s后从 Windows 任务栏中移除覆盖图标。
输出：

Windows 任务栏中的 Flash 帧效果

• 根据官方 MSDN：

“Typically, a window is flashed to inform the user that the window requires attention but that it does not currently have the keyboard focus.”

• index.js : 在 Electron 中，我们可以高亮应用程序的任务栏图标并使其闪烁以通知用户。图标的闪烁效果可以在特定时间间隔内发生，也可以在特定事件发生之前发生。如果通知很紧急，我们甚至可以让图标闪烁，直到用户没有明确关注应用程序窗口。这类似于在 macOS 上弹跳停靠栏图标。

javascript

const electron = require('electron')
const path = require('path');
  
// Import BrowserWindow using Electron remote
const BrowserWindow = electron.remote.BrowserWindow;
let win = BrowserWindow.getFocusedWindow();
  
setTimeout(() => {
    win.flashFrame(true);
}, 5000)
  
win.once('focus', () => win.flashFrame(false));

说明： BrowserWindow对象的win.flashFrame(flag)实例方法根据提供的flag: Boolean参数启动或停止 Windows 任务栏中应用程序图标的闪烁。这是一种吸引用户注意力的有效方式，在所有现代桌面应用程序中都有使用。此 Instance 方法没有任何返回类型。在上面的代码中，我们使用了setTimeout()函数来模拟 Windows 任务栏中的闪烁图标效果。应用程序启动后5s将激活闪烁效果。

注意：如果不调用此 Instance 方法且flag参数设置为false ，则闪烁将无限继续。在上面的代码中，当应用程序窗口进入焦点时，即在当前 BrowserWindow 实例上发出焦点事件时，我们使用flag: false调用。关于 BrowserWindow.getFocusedWindow() 静态方法获取当前BrowserWindow实例的详细说明，请参考文章： ElectronJS 中的仿真。
输出：