通过 Electron 托盘（tray）实现后台执⾏⻓任务

• 语言: 中文（简体）
• 格式: .pdf
• 来源: buildgoodweb.github.io

摘要

文档详细说明了通过 Electron 托盘实现后台执行长任务的功能。主要内容包括：创建托盘并配置菜单，实现应用在后台运行，关闭应用时的三种场景处理（取消、后台运行、退出），以及托盘图标的动态调整。文档还解决了 MacOS 全屏退出界面黑屏的问题，并适配了 Windows 系统的关闭行为。托盘功能包括显示未读消息、图标闪动以及根据系统模式切换显示不同的图标。

AI总结

《通过 Electron 托盘（tray）实现后台执行长任务》

本文主要介绍了如何通过 Electron 的托盘功能实现后台执行长任务，并详细说明了托盘的创建、功能实现以及注意事项。

### 核心内容总结：

1. **托盘创建与菜单配置**：
- 实例化 `Tray` 对象并传入图标路径。
- 通过 `Menu.buildFromTemplate` 创建右键菜单。
- 将菜单绑定到托盘。
- 示例代码：

     const { app, Menu, Tray } = require('electron');
     let tray = null;
     app.whenReady().then(() => {
       tray = new Tray('/path/to/my/icon');
       const contextMenu = Menu.buildFromTemplate([...]);
       tray.setContextMenu(contextMenu);
     });

2. **基于托盘实现后台运行**：
- 关闭窗口前唤醒确认对话框，支持三种场景：
1. 取消关闭。
2. 退出但选择后台运行，任务继续执行。
3. 退出且不选择后台运行，任务终止。
- 通过 `mainWindow.on('close', ...)` 监听窗口关闭事件。

3. **托盘图标动态更换**：
- 根据系统主题模式（如 MacOS 的浅色模式和深色模式）切换托盘图标。
- 监听系统主题变化事件，动态更新托盘图标：

     const getTrayIcon = () => {
       return path.resolve(__dirname, process.platform !== 'darwin' ? 'tray_win.png' : nativeTheme.shouldUseDarkColors ? 'tray_dark.png' : 'tray_light.png');
     };
     nativeTheme.on('updated', () => {
       tray && tray.setImage(getTrayIcon());
     });

4. **托盘其他功能**：
- 显示未读消息数：通过 `tray.setTitle('6')` 设置文字提示。
- 未读消息时图标闪动：通过定时轮询切换图标实现。

5. **注意事项**：
- **MacOS fullscreen 问题**：在全屏模式下退出界面可能会出现黑屏，可通过先退出全屏再隐藏窗口解决。

     if (mainWindow.isFullScreen()) {
       mainWindow.once('leave-full-screen', () => mainWindow.hide());
       mainWindow.setFullScreen(false);
     }

- **Windows 关闭确认框**：若需阻止窗口关闭事件，在 `close` 事件中调用 `e.preventDefault()`。

6. **托盘点击行为的平台差异**：
- MacOS 默认左单击打开菜单栏，右单击显示上下文菜单。
- Windows 左单击显示主窗口，右单击显示上下文菜单。

### 总结：
本文详细介绍了通过 Electron 托盘实现后台执行长任务的方法，包括托盘的创建、菜单配置、后台任务处理、图标动态更换等，涵盖了 MacOS 和 Windows 的平台差异及常见问题的解决方案。通过这些方法，开发者可以实现应用在后台继续运行长任务，并提供良好的用户交互体验。