Electron系统托盘设置详解

最新推荐文章于 2025-03-27 06:49:05 发布

AxCybersecurity

最新推荐文章于 2025-03-27 06:49:05 发布

阅读量442

点赞数

本文链接：https://blog.youkuaiyun.com/AxCybersecurity/article/details/133121047

版权

Electron 专栏收录该内容

69 篇文章 ¥59.90 ¥99.00

订阅专栏

本文详述如何使用Electron框架创建系统托盘应用，包括安装 Electron、编写JavaScript代码设置托盘图标、上下文菜单及事件监听，以及创建HTML窗口内容。通过示例代码展示从创建窗口到响应托盘点击的完整流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Electron是一个强大的框架，用于构建跨平台的桌面应用程序。其中一个常见的功能是在系统托盘中显示应用程序图标，并提供相应的菜单和交互功能。本文将详细介绍如何使用Electron创建一个保姆级别的系统托盘设置。

首先，我们需要安装Electron。通过以下命令使用npm（Node.js包管理器）进行安装：

npm install electron

安装完成后，我们可以开始编写应用程序的代码。创建一个新的JavaScript文件，例如app.js，并将以下代码添加到文件中：

const {
    app, Tray, Menu } = require('

了解本专栏

订阅专栏解锁全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

AxCybersecurity

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

订阅专栏

Electron系统托盘使用

wandoumm的博客

12-30

1105

【代码】Electron系统托盘使用。

Electron如何实现系统托盘？

王铁柱666的博客

10-28

325

你可以根据需要自定义上下文菜单中的项目。你可以使用 Menu API 的其他方法来添加不同类型的菜单项目，例如复选框、子菜单等。在上面的示例中，我们首先创建了一个新的 BrowserWindow 实例，并加载了一个 HTML 文件。然后，我们使用 Tray API 创建了一个新的系统托盘图标，并设置了一个上下文菜单。最后，当用户与系统托盘图标交互时（例如单击或右键单击），你可以使用 Tray API 的事件监听器来执行相应的操作。是托盘图标的路径，你需要将其替换为你自己的图标文件路径。

参与评论您还未登录，请先登录后发表或查看评论

Electron限制只启动一个实例、系统托盘实现

qq_44741577的博客

03-19

2605

打包的应用程序的时候，点击应用图标会打开多个实例，想要限制只启动一个应实例，并且点击应用的叉号，不关闭应用而是隐藏到系统托盘，右键托盘图标点击退出，才真正退出应用。，则表示已经有一个实例在运行，可以通过。方法来请求单一实例锁。文件夹会被复制到打包后应用程序的。如图（我是Windows系统）获取图标文件路径方法如下。的主进程中，可以使用。

Electron系统托盘

mm_0123456789的博客

02-22

2266

系统托盘 Tray 文章目录系统托盘 Tray1. 主进程2. 实现效果 1. 主进程代码如下（示例）： const{ app, BrowserWindow,Tray, Menu } require'electron' let mainWindow let appTray = null; // 在外面创建 tray ，防止被自动删除，导致图标消失 function createWindow () { /** * Initial window options */ mainWindow

Electron 系统托盘图标

qq_34533703的博客

07-04

1202

一、在入口文件electron.js中引入。二、在初始化完成后添加图片。

electron自定义托盘 + 托盘闪烁+托盘与进程通信

ranshakalove的博客

03-22

848

如果本地测试没问题打包之后托盘不显示 100% 就是icon 路径问题。新建 tore.js。

Electron 自定义托盘实战——桌面计算器

小王的技术库

03-16

1419

整理了75个JS高频面试题，并给出了答案和解析，基本上可以保证你能应付面试官关于JS的提问。

electron_vue—实现托盘以及托盘闪烁

gzmhxsn的博客

03-03

920

基于 electron_vue 实现系统托盘 以及消息触发托盘闪烁事件

基于Vue的Electron掘金小册源码设计解析

10-03

此外，该项目的源码还可能涉及到Electron特有的API使用，比如窗口管理、菜单创建、系统托盘、快捷键绑定等，这些都是构建桌面应用不可或缺的元素。整体来看，“基于Vue的Electron掘金小册源码设计解析”项目是一个...

解析Electron

最新发布

T_iAn_T的博客

03-27

1153

解析Electron

电子托盘窗口：:framed_picture:使用Electron.js生成自定义托盘窗口

02-04

在系统任务栏中为您的应用程序快速创建可自定义的菜单/弹出窗口。电子托盘窗口，基本上将窗口放在托盘图标附近。在这些情况发生时，您可以自定义窗口/任务栏或跟踪事件。预览安装 npm install electron-tray-window 要么 yarn add electron-tray-window 用法 const trayWindow = require ( "electron-tray-window" ) ; 您可以使用不同的方式。 “ setOptions（）”函数接受对象值。如果您已经在TrayWindow外部创建了任务栏或窗口，则可以将其作为参数传递给.setOpt

electron设置window系统托盘

知秋

05-15

334

electron设置托盘 // 设置系统托盘 const setAppTray = () => { // 托盘对象 var appTray = null // 系统托盘右键菜单 var trayMenuTemplate = [ { label: '退出', click: functio...

【ELECTRON】Electron 实现右下角托盘图标显示

weixin_44450506的博客

10-14

2756

当我们点击桌面程序右上角的关闭按钮，想让程序隐藏到右下角而不是直接退出程序，程序仍然后台运行。

Electron实战之菜单与托盘

xiangzhihong8的专栏

02-19

4154

菜单、托盘是桌面端应用必备的功能之一，我们通常会在菜单上配置应用常用的：偏好设置、显示隐藏、打开文件等功能，在托盘内设置：退出、重启、帮助等辅助性功能，帮助用户方便快捷地控制应用的一些系统功能。系统托盘实际上也是一个菜单，通过点击鼠标触发。

electron系统托盘

热情、奔放、快乐编程！

05-19

572

当我们关闭一个应用程序的时候，它其实关闭了，但是没有完全关闭，只是隐藏了，有的就存在系统托盘中，那么如何在electron设置系统托盘呢。

第6章：Electron的菜单与托盘（2）

一名全栈开发工程师

07-03

832

通过本章内容，你已经了解了如何在 Electron 应用中创建和管理应用菜单、自定义上下文菜单以及创建系统托盘图标和菜单。

electron系统托盘与右键菜单

hamburgerJ的博客

02-21

1281

在main.js里面 ①导入Tray const { app, BrowserWindow, Menu, MenuItem, Tray } = require('electron') ②封装系统托盘函数（png是托盘图标） // 系统托盘 function tray() { tray = new Tray('./car.png') const contextMenu = Menu.buildFromTemplate([ { role: 'minimize',

electron ant-design-vue 不能用_【Electron-Playground系列】托盘篇

weixin_39554434的博客

10-27

250

作者：梁棒棒electron-playground 地址：tal-tech/electron-playground托盘虽小，作用不小。它是你的应用正在操作系统运行的标识，它可以通知你有新消息，可以唤醒应用界面，可以设置上下文（右键）菜单设置更多的功能等。下面我们就来一一实现这些功能，要在主进程进行操作。1. 创建托盘首先来创建一个托盘图标，简单三步即可：从electron库引入Tray类获取图标地...

Electron中使用tray模块实现系统拖盘

越陌度阡

04-25

3806

Electron中的tray模块主要用来实现桌面软件特有的拖盘功能，包括创建拖盘图标、拖盘悬停提示、拖盘右键菜单、拖盘消息提示等等。 1. 创建拖盘 var { Menu, Tray, BrowserWindow, app } = require('electron'); var path = require('path'); // 创建拖盘 var iconTray = new Tray(path.join(__dirname,'../static/love.png')); 2. 鼠标悬停拖盘

electron最小化托盘

03-17

### 如何在 Electron 中实现窗口最小化到系统托盘 要在 Electron 应用程序中实现窗口最小化到系统托盘的功能，可以利用 `Tray` 和 `BrowserWindow` 模块来完成这一操作。以下是详细的说明： #### Tray 和 BrowserWindow 基础 Electron 提供了一个名为 `Tray` 的模块，用于创建系统托盘图标[^2]。通过该模块，可以在操作系统的通知区域显示自定义的菜单项或事件处理逻辑。同时，`BrowserWindow` 是 Electron 主进程中用来管理应用窗口的核心类[^3]。可以通过监听特定事件并调用方法控制窗口的行为。 --- #### 实现步骤详解以下是一个完整的代码示例，展示如何将窗口最小化至系统托盘，并提供恢复功能： ```javascript const { app, BrowserWindow, Tray, Menu } = require('electron'); let win; let tray; function createWindow() { win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true, contextIsolation: false, }, }); win.loadURL('https://example.com'); // 加载页面 URL 或本地 Vue 文件路径 win.on('close', (event) => { if (!app.isQuitting) { event.preventDefault(); win.hide(); // 隐藏窗口而不是关闭它 } }); win.on('minimize', (event) => { event.preventDefault(); win.hide(); // 取消默认行为并将窗口隐藏 }); } function createTray() { const iconPath = `${__dirname}/tray-icon.png`; // 替换为实际图片路径 tray = new Tray(iconPath); const contextMenu = Menu.buildFromTemplate([ { label: 'Show', click: () => { win.show(); // 显示主窗口 }, }, { label: 'Quit', click: () => { app.isQuitting = true; // 设置退出标志位 app.quit(); // 正常退出应用程序 }, }, ]); tray.setToolTip('This is my application.'); tray.setContextMenu(contextMenu); } app.whenReady().then(() => { createWindow(); createTray(); app.on('activate', () => { if (BrowserWindow.getAllWindows().length === 0) { createWindow(); } }); }); app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit(); } }); ``` 上述代码实现了以下几个核心功能： 1. **创建主窗口**：使用 `BrowserWindow` 创建一个可交互的应用窗口。 2. **阻止窗口关闭**：当用户尝试关闭窗口时，将其隐藏而非完全销毁。 3. **设置系统托盘**：通过 `Tray` 添加一个带有上下文菜单的托盘图标。 4. **支持重新打开窗口**：点击托盘中的 “Show” 菜单项即可再次显示窗口。 --- #### 关键点解析 - **Tray 图标路径** 托盘图标的路径应指向有效的 PNG 或 ICO 文件。如果未指定有效路径，则可能导致错误。 - **跨平台兼容性** 上述代码已考虑不同操作系统间的差异（如 macOS 不会在所有窗口关闭后自动退出）。因此，在非 Darwin 平台上显式调用了 `app.quit()` 方法。 - **Vue 整合注意事项** 如果基于 Vue 构建前端界面，请确保正确配置 Webpack 或 Vite 来加载静态资源文件（例如托盘图标），以便它们能够被主进程访问[^1]。 ---