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

推荐答案

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

-- -------------------- ---- -------
----- - ---- ----- ---- - - --------------------
----- ---- - ----------------

--- ---- - -----

----------------------- -- -
  -- ------
  ---- - --- ------------------------- -------------

  -- ------------
  ----- ----------- - ------------------------
    - ------ ----- ----- --------- ------ -- -- - -- ------ -- - --
    - ------ ----- ----- --------- ------ -- -- - ----------- - -
  ---

  ----------------------------
  ---------------------------------
---

本题详细解读

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 应用中成功创建一个托盘图标，并为其添加上下文菜单和工具提示。