electron最小化托盘、禁用右键菜单

备份一下以防止忘记

// 引用 Tray 和 path 
import { BrowserWindow, Menu, app, ipcMain, Tray } from "electron";
const path = require("path");

1、创建窗口

// 创建窗口
let mainWindow = new BrowserWindow({
    minHeight: 0,
    useContentSize: true,
    minHeight: 80,
    width: 450,
    show: false,
    frame: false, // 无边框
    webPreferences: {
      contextIsolation: false,
      nodeIntegration: true,
      webSecurity: false,
      // 如果是开发模式可以使用devTools 调试
      devTools: process.env.NODE_ENV === "development" || config.build.openDevTools,
      // 在macos中启用橡皮动画
      scrollBounce: process.platform === "darwin",
    },
    resizable: true, //禁止窗口大小缩放
    transparent: true, //设置透明
    alwaysOnTop: process.env.NODE_ENV === "production", //窗口是否总是显示在其他窗口之前
  });

 2、最小化托盘

 // 任务栏-关闭所有窗口-的时候触发
  mainWindow.on("close", (event) => {
    mainWindow.hide();
    mainWindow.setSkipTaskbar(true);
    event.preventDefault();
  });

  //终端最小化托盘
  global.__static = path.join(__dirname, "/static").replace(/\\/g, "\\\\");  // 打包后地址指向 dist/static
  let iconPath =
    process.env.NODE_ENV === "development"
      ? path.join(__dirname, "../../../static/icon.ico")
      : path.join(__static, "./icon.ico");
  
  let tray = new Tray(iconPath);
  const contextMenu = Menu.buildFromTemplate([
    {
      label: "退出",
      click: () => {
        mainWindow.destroy();
        app.quit();
      },
    },
  ]);
  tray.setToolTip("终端名称");  
  tray.setContextMenu(contextMenu);
  tray.on("click", () => {   // 点击托盘图标显示窗口
    mainWindow.show();
    mainWindow.setSkipTaskbar(false);
  });

3、 解决 electron 使用win.hide()再使用win.show()会引起窗口闪烁问题

app.commandLine.appendSwitch('wm-window-animations-disabled');

4、禁用右键菜单 


  // 禁用右键菜单
  mainWindow.hookWindowMessage(278, function (e) {
    mainWindow.setEnabled(false); //窗口禁用
    setTimeout(() => {
      mainWindow.setEnabled(true);
    }, 100); //延时太快会立刻启动,太慢会妨碍窗口其他操作,可自行测试最佳时间
    return true;
  });

5、Electron 唤醒(托盘最小化的时候双击桌面快捷键图标唤醒页面)

// electron 托盘最小化的时候双击桌面图标快捷键启动
// window平台 检测 app.requestSingleInstanceLock() 是否是单例模式,如果是就退出,并且发送一个事件给 second-instance 
const gotTheLock = app.requestSingleInstanceLock();
if (gotTheLock) {
  app.on("second-instance", (event, commandLine, workingDirectory) => {
    // 当运行第二个实例时,将会聚焦到mainWindow这个窗口
    if (mainWindow) {
      mainWindow.show();
      mainWindow.setSkipTaskbar(false);
      mainWindow.focus();
    }
  });
}

参考:Electron 生命周期介绍

6、禁止程序多开

//禁止程序多开,此处需要单例锁的打开注释即可
const gotTheLock = app.requestSingleInstanceLock();
if (!gotTheLock) {
  app.quit();
}

### 如何在 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]。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值