Electron 中如何创建托盘图标 (Tray)？

推荐答案

在 Electron 中创建托盘图标（Tray）可以通过 Tray 类来实现。以下是一个简单的示例代码：

// www.javascriptcn.com code example
const { app, Tray, Menu } = require('electron');
const path = require('path');

let tray = null;

app.whenReady().then(() => {
  // 创建托盘图标
  tray = new Tray(path.join(__dirname, 'icon.png'));

  // 设置托盘图标的上下文菜单
  const contextMenu = Menu.buildFromTemplate([
    { label: '显示', type: 'normal', click: () => { /* 点击事件处理 */ } },
    { label: '退出', type: 'normal', click: () => { app.quit(); } }
  ]);

  tray.setToolTip('这是一个托盘图标');
  tray.setContextMenu(contextMenu);
});

本题详细解读

1. 引入必要的模块

首先，需要引入 Tray 和 Menu 模块。Tray 用于创建和管理托盘图标，Menu 用于创建上下文菜单。

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

2. 创建托盘图标

使用 Tray 类的构造函数来创建托盘图标。构造函数需要传入一个图标文件的路径。

tray = new Tray(path.join(__dirname, 'icon.png'));

3. 设置托盘图标的工具提示

可以使用 setToolTip 方法为托盘图标设置工具提示，当用户将鼠标悬停在图标上时，会显示该提示。

tray.setToolTip('这是一个托盘图标');

4. 创建上下文菜单

使用 Menu.buildFromTemplate 方法创建一个上下文菜单。菜单项可以包含标签、类型和点击事件处理函数。

const contextMenu = Menu.buildFromTemplate([
  { label: '显示', type: 'normal', click: () => { /* 点击事件处理 */ } },
  { label: '退出', type: 'normal', click: () => { app.quit(); } }
]);

5. 将上下文菜单绑定到托盘图标

使用 setContextMenu 方法将创建的上下文菜单绑定到托盘图标上。

tray.setContextMenu(contextMenu);

6. 处理应用生命周期

确保在应用准备就绪后再创建托盘图标，通常将代码放在 app.whenReady().then() 回调中。

app.whenReady().then(() => {
  // 创建托盘图标和相关逻辑
});

通过以上步骤，你可以在 Electron 应用中成功创建一个托盘图标，并为其添加上下文菜单和工具提示。