electron托盘图标菜单及监听双击托盘图标事件

源码资源网

electron托盘图标菜单及监听双击托盘图标事件在 Electron 应用中实现双击托盘图标的功能，可以通过监听  `tray`  对象的  `double-click`  事件来实现。以下是一个简单的示例，展示了如何在 Electron 中实现这一功能：
1. **创建一个 Electron 应用**：
   首先，确保你已经创建了一个基本的 Electron 应用。
2. **安装必要的依赖**：
   确保你已经安装了 Electron：

1. npm install electron

复制代码

3. **在主进程中设置托盘图标**：
   在你的主进程文件（通常是  `main.js`  或  `index.js` ）中，设置托盘图标并监听双击事件：

1. const { app, BrowserWindow, Tray, Menu } = require('electron');
   
2.    let mainWindow;
   
3.    let tray;
   
4.     function createWindow() {
   
5.        mainWindow = new BrowserWindow({
   
6.            width: 800,
   
7.            height: 600,
   
8.            webPreferences: {
   
9.                nodeIntegration: true,
   
10.            },
    
11.        });
    
12.         mainWindow.loadFile('index.html');
    
13.         // 关闭窗口时隐藏而不是退出应用
    
14.        mainWindow.on('close', (event) => {
    
15.            if (!app.isQuiting) {
    
16.                event.preventDefault();
    
17.                mainWindow.hide();
    
18.            }
    
19.        });
    
20.    }
    
21.     app.on('ready', () => {
    
22.        createWindow();
    
23.         // 创建托盘图标
    
24.        tray = new Tray('path/to/icon.png'); // 替换为你的图标路径
    
25.        const contextMenu = Menu.buildFromTemplate([
    
26.            { label: 'Show', click: () => { mainWindow.show(); } },
    
27.            { label: 'Quit', click: () => { app.isQuiting = true; app.quit(); } }
    
28.        ]);
    
29.        tray.setToolTip('This is my application.');
    
30.        tray.setContextMenu(contextMenu);
    
31.         // 监听双击事件
    
32.        tray.on('double-click', () => {
    
33.            mainWindow.isVisible() ? mainWindow.hide() : mainWindow.show();
    
34.        });
    
35.    });
    
36.     app.on('window-all-closed', () => {
    
37.        if (process.platform !== 'darwin') {
    
38.            app.quit();
    
39.        }
    
40.    });
    
41.     app.on('activate', () => {
    
42.        if (BrowserWindow.getAllWindows().length === 0) {
    
43.            createWindow();
    
44.        }
    
45.    });

复制代码

4. **运行应用**：
   运行你的 Electron 应用，双击托盘图标时，窗口会显示或隐藏。
### 注意事项：
- 确保你提供的托盘图标路径正确。
- 如果你希望在窗口隐藏时仍然能够通过托盘图标访问应用，请确保正确处理窗口的显示和隐藏逻辑。
通过以上步骤，你就可以在 Electron 应用中实现双击托盘图标的功能。