Electron应用程序创建系统托盘

Electron应用程序的系统托盘是一项常用功能，它允许应用程序以图标的形式在操作系统的任务栏或菜单栏中常驻，提供快速访问应用程序功能的方式。本文将介绍如何使用Electron来创建系统托盘。

实现思路

1. 引入tray模块：在Electron应用程序中，可以使用require语句引入 tray模块，该模块提供了创建和管理系统托盘的功能。
2. 创建托盘图标：使用tray模块的new Tray()方法，可以创建一个系统托盘实例，并指定要显示的图标。图标可以是本地文件路径或Base64编码的图像。
3. 添加上下文菜单：通过调用托盘实例的setContextMenu()方法，可以为系统托盘添加一个上下文菜单。上下文菜单可以包含各种菜单项，例如打开应用程序窗口、执行特定操作或退出应用程序等。

代码示例

import { app, Tray, Menu, session } from "electron";
const isDevelopment = process.env.NODE_ENV !== "production";

export function createTray (mainWindow) {
  // 获取托盘图标
  const iconPath = isDevelopment ? `${__static}/favicon.ico` : process.cwd() + '\resources\app.asar.unpacked\public\favicon.ico'
  const contextMenu = Menu.buildFromTemplate([
    { label: '清除缓存', click: () => session.defaultSession.clearCache() },
    { label: '退出', click: () => app.exit() },
    { label: '重启', click: () => { app.relaunch(); app.exit() } },
  ])
  // 创建系统托盘
  const tray = new Tray(iconPath);
  // 设置鼠标悬停时显示的标题文本
  tray.setToolTip('云PMS助手');
  // 设置托盘菜单
  tray.setContextMenu(contextMenu)
  // 托盘图标被点击时触发的事件
  tray.on('click', () => {
    if (mainWindow.isVisible()) {
      // 如果窗口可见，则隐藏窗口
      mainWindow.hide();
    } else {
      // 如果窗口隐藏，则显示窗口
      mainWindow.show();
    }
  });
  return tray
}

调用封装的方法

async function createWindow () {
  win = new BrowserWindow({
    width: 320,
    height: 190,
    icon: `${__static}/favicon.ico`,// 此处设置的是窗口图标
    resizable: false,// 禁止改变窗口大小
    webPreferences: {
      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
      contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION,
      enableRemoteModule: true,
      preload: './preload.js',
      webviewTag: true,
      webSecurity: false, // 解决跨域问题
    },
  });
  win.setAlwaysOnTop(true) // 将窗口保持在最前面
  Menu.setApplicationMenu(null)// 隐藏菜单栏
  mainWindow = win
  if (process.env.WEBPACK_DEV_SERVER_URL) {
    // Load the url of the dev server if in development mode
    await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL);
    if (!process.env.IS_TEST) win.webContents.openDevTools();
  } else {
    createProtocol("app");
    win.loadURL("app://./index.html");
  }
  // 开启本地服务
  expressApp.startServer(win)
  // 创建系统托盘
  tray = createTray(mainWindow)
}