electron-vite_13取消所有窗口默认菜单显示

打包的应用,如果不想显示系统默认菜单的话,可以导入Menu对象,并把菜单设置为null,来达到隐藏系统默认菜单的目的;

如果使用window.open(‘xxx’, ‘_blank’),也可以不显示默认菜单;

我们项目中主要是使用WebContentsView内嵌url实现,但是使用window.open(‘xxx’, ‘_blank’)打开新窗口的时候显示了系统默认菜单,很丑陋所以查看了官方文档;

核心代码
// 1.引入Menu
import { BrowserWindow, Menu } from 'electron';
function createWindow(): void {
    const mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
    });
    // 2.把菜单设置为null
    Menu.setApplicationMenu(null);
};
Menu

创建原生应用菜单和上下文菜单; 运行在主进程;

静态方法_setApplicationMenu
  • 通过 null 将取消默认菜单。在 Windows 和 Linux 上,这具有从窗口中删除菜单栏的附加效果。
  • 注意:如果应用未设置默认菜单,则会自动创建默认菜单。它包含 File、Edit、View、Window 和 Help 等标准项目。
Menu.setApplicationMenu(null)
### 如何在 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、付费专栏及课程。

余额充值