Electron 系统托盘功能实现详解

本文介绍 Electron 系统托盘（Tray）功能的实现方法，基于 electron-sample-apps 项目中的 tray 示例代码，展示如何在桌面应用中创建和管理系统托盘图标。

项目简介

electron-sample-apps 是由 hokein 维护的 Electron 示例应用集合，该项目在 GitHub 上已获得 3.9k stars。它包含多个独立的示例应用，用于演示 Electron 的各种 API 用法。本文聚焦于其中的 tray 示例，展示系统托盘功能的完整实现。

核心功能

系统托盘（Tray）是桌面应用的重要组成部分，允许应用在后台运行并通过托盘图标与用户交互。该示例展示了以下核心功能：

托盘图标创建：在系统托盘区域显示应用图标
上下文菜单：右键点击托盘图标显示自定义菜单
菜单项类型：支持单选按钮、子菜单、普通菜单项
快捷键绑定：为菜单项配置键盘快捷键
窗口控制：通过菜单项控制应用窗口的显示/隐藏

代码实现

以下是 tray 示例的核心代码实现：

javascript

const {app, Tray, Menu, BrowserWindow} = require('electron');
const path = require('path');

const iconPath = path.join(__dirname, 'icon.png');
let appIcon = null;
let win = null;

app.on('ready', function(){
  // 创建隐藏的主窗口
  win = new BrowserWindow({show: false});

  // 创建托盘图标
  appIcon = new Tray(iconPath);

  // 构建上下文菜单
  var contextMenu = Menu.buildFromTemplate([
    {
      label: 'Item1',
      type: 'radio',
      icon: iconPath
    },
    {
      label: 'Item2',
      submenu: [
        { label: 'submenu1' },
        { label: 'submenu2' }
      ]
    },
    {
      label: 'Item3',
      type: 'radio',
      checked: true
    },
    {
      label: 'Toggle DevTools',
      accelerator: 'Alt+Command+I',
      click: function() {
        win.show();
        win.toggleDevTools();
      }
    },
    {
      label: 'Quit',
      accelerator: 'Command+Q',
      selector: 'terminate:',
    }
  ]);

  // 设置托盘提示文本
  appIcon.setToolTip('This is my application.');

  // 设置上下文菜单
  appIcon.setContextMenu(contextMenu);
});

关键 API 说明

Tray 类

Tray 类用于在系统托盘区域创建图标。构造函数接收图标路径作为参数：

javascript

const tray = new Tray(iconPath);

Menu.buildFromTemplate

用于从模板构建菜单，支持多种菜单项类型：

类型	说明
`normal`	普通菜单项
`radio`	单选按钮菜单项
`submenu`	包含子菜单的菜单项

常用方法

setToolTip(text)：设置鼠标悬停时显示的提示文本
setContextMenu(menu)：设置右键菜单
on('click', callback)：监听托盘图标点击事件

运行示例

前置要求

Node.js 环境
Electron 已安装

运行步骤

bash

# 克隆项目
git clone https://github.com/hokein/electron-sample-apps.git

# 进入 tray 示例目录
cd electron-sample-apps/tray

# 运行示例
electron .

注意事项

图标路径：确保图标文件存在于指定路径，不同操作系统对图标尺寸有不同要求
平台差异：Windows、macOS、Linux 的托盘行为可能略有不同
内存管理：应用退出时需要销毁 Tray 实例，避免内存泄漏
菜单更新：运行时可以通过 setContextMenu 动态更新菜单内容

项目链接

GitHub 仓库：https://github.com/hokein/electron-sample-apps
示例路径：tray/ 目录
官方文档：https://www.electronjs.org/docs/api/tray