笔记大全

electron最小化托盘怎么设置

更新时间：2023-10-05

前言：

在使用 Electron 开发桌面应用时，经常需要将应用最小化到系统托盘中，以便用户可以随时方便地访问应用功能。在本文中，我们将介绍如何在 Electron 应用中实现最小化到托盘的功能。

实现步骤：

步骤一：安装依赖

首先，我们需要安装 electron-window-state 和 electron-traywindow 这两个 Electron 的第三方模块，用于实现窗口状态和托盘功能。

npm install electron-window-state electron-traywindow

步骤二：创建托盘菜单和窗口状态

在 Electron 主进程中，创建一个托盘菜单和窗口状态，这样我们就可以通过点击托盘图标来显示/隐藏应用窗口。

首先，导入需要的模块：

const { app, BrowserWindow, Menu, Tray } = require('electron');
const WindowStateKeeper = require('electron-window-state');
const path = require('path');
const url = require('url');

然后，创建一个窗口状态管理器，用于管理窗口的位置、尺寸和显示状态：

let mainWindowState;

function createWindow() {
  mainWindowState = WindowStateKeeper({
    defaultWidth: 800,
    defaultHeight: 600,
  });

  mainWindow = new BrowserWindow({
    x: mainWindowState.x,
    y: mainWindowState.y,
    width: mainWindowState.width,
    height: mainWindowState.height,
    show: false, // 不立即显示窗口，等待系统托盘点击事件
    webPreferences: {
      nodeIntegration: true,
    },
  });
  
  // ... 窗口相关设置
}

步骤三：创建系统托盘

在 Electron 主进程中，我们可以通过创建一个系统托盘图标来实现最小化到托盘的功能：

let tray;

function createTray() {
  tray = new Tray(path.join(__dirname, 'tray-icon.png'));
  
  const contextMenu = Menu.buildFromTemplate([
    { label: '显示', click: () => mainWindow.show() },
    { label: '退出', click: () => app.quit() },
  ]);
  
  tray.setToolTip('Electron App');
  tray.setContextMenu(contextMenu);
  
  tray.on('click', () => {
    mainWindow.isVisible() ? mainWindow.hide() : mainWindow.show();
  });
}

步骤四：在应用关闭时销毁托盘

最后，在应用退出时需要销毁托盘，以免托盘图标仍然显示在系统托盘中：

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('will-quit', () => {
  tray.destroy();
});

总结：

通过以上步骤，我们可以将 Electron 应用最小化到系统托盘中。首先，安装相应的依赖模块；然后，创建窗口状态和托盘菜单；接着，在系统托盘中显示托盘图标，并监听点击事件；最后，在应用退出时销毁托盘。

如果你遇到问题或者想进一步了解 Electron 托盘的使用，可以查看 Electron 官方文档或者相关的第三方库文档。

c语言编程笔录