学会用 Electron 自定义 Dock 图标
2023-09-17 03:51:22
Dock 是 Mac 操作系统电脑主界面底部的应用程序集合栏，相当于 Windows 电脑中的桌面快捷方式。通常，我们都会把经常使用的软件锁定在 Dock 下，方便快捷地找到和使用它们。 Dock 图标在 UI 上总共包括两方面的内容：图标 Logo 和消息标识。首先，我们去苹果开放者网站的 Dock Programming Guide 文档中寻找答案。
电子应用程序中的 Dock 图标
在 macOS 中，Dock 作为应用程序在电脑上运行期间启动后驻留的图标。可以理解为应用程序在桌面上留下的记号，你可以随时通过点击它打开应用程序。Dock 图标位于屏幕的底部，默认情况下，当你打开一个应用程序时，它的图标会自动添加到 Dock 中。不过，在 Electron 中，应用程序图标不会自动添加到 Dock 中。
默认情况下，如果希望为 Electron 应用程序添加 Dock 图标，你至少需要：
- 将此图标复制到应用程序的资源目录。
- 创建一个
Info.plist文件并将其放在应用程序的资源目录。
Info.plist 文件中需要包含 CFBundleDockType 键，其值为 static，指示图标为静态图像，这与 macOS 中的动态图标不同。通常你可以直接从现有应用程序的 Dock 图标中复制这些内容。不过，如果你希望自定义图标，请确保图标尺寸为 16x16 像素，格式为 PNG。
Dock 图标外观：图标 Logo 和消息标识
Dock 图标在 UI 上总共包括两方面的内容：图标 Logo 和消息标识。
图标 Logo 对应于程序本身的图标，通常显示在 Dock 图标的左上角。可以根据应用程序的需求，自定义应用程序的图标。
消息标识位于图标的右上角，用于指示应用程序的当前状态。例如，未读邮件数、正在下载的文件数或者正在进行的操作。
用 Electron 自定义 Dock 图标
Dock 图标是 macOS 中的一个重要视觉元素，一个醒目、易于辨认的 Dock 图标可以显著提升应用程序的用户体验。本章节中，我们将会讲解如何在 Electron 中自定义 Dock 图标的外观，包括：
- 改变应用程序图标的样式
- 添加动态消息标识
- 改变 Dock 图标菜单的选项和内容
改变应用程序图标的样式
改变应用程序图标的样式是非常容易的。你只需要创建一个图标文件，然后将该文件复制到应用程序的资源目录即可。
1. 创建图标文件
你可以使用任何图像编辑软件来创建图标文件。然而，需要注意的是，图标文件必须是 PNG 格式，并且大小必须为 16x16 像素。
2. 复制图标文件
将创建好的图标文件复制到应用程序的资源目录。
3. 更新 Info.plist 文件
在应用程序的资源目录中找到 Info.plist 文件，并在其中添加以下代码：
<key>CFBundleDockType</key>
<string>static</string>
4. 重启应用程序
重启应用程序后，你就会看到新的 Dock 图标了。
添加动态消息标识
Dock 图标中的消息标识可以用来指示应用程序的当前状态。你可以通过以下步骤来添加动态消息标识：
1. 创建一个图像文件
首先，你需要创建一个 PNG 格式的图像文件。该图像文件的大小必须为 16x16 像素。
2. 将图像文件复制到应用程序的资源目录
将创建好的图像文件复制到应用程序的资源目录。
3. 更新 Info.plist 文件
在应用程序的资源目录中找到 Info.plist 文件，并在其中添加以下代码：
<key>CFBundleDockTileData</key>
<dict>
<key>com.apple.dock.extra-badge</key>
<data>
UklGRiq2/////wAmAw==
</data>
</dict>
4. 重启应用程序
重启应用程序后，你就会看到 Dock 图标中出现了动态消息标识。
改变 Dock 图标菜单的选项和内容
你还可以改变 Dock 图标菜单的选项和内容。
1. 创建一个菜单文件
首先，你需要创建一个菜单文件。该菜单文件可以是任何格式，例如，XML 或 JSON。
2. 将菜单文件复制到应用程序的资源目录
将创建好的菜单文件复制到应用程序的资源目录。
3. 更新 Info.plist 文件
在应用程序的资源目录中找到 Info.plist 文件，并在其中添加以下代码：
<key>CFBundleDockTileMenu</key>
<string>Menu.xml</string>
4. 重启应用程序
重启应用程序后，你就会看到 Dock 图标菜单中的选项和内容已经发生了改变。
