在 Electron 中,Menu 模块用于创建和管理应用程序的菜单。菜单可以包含应用程序的各种命令和操作,它们可以是应用程序菜单栏上的顶级菜单,也可以是上下文菜单(右键菜单)等。

以下是一个简单的例子,演示了如何使用 Electron 的 Menu 模块创建一个简单的应用程序菜单:

在主进程的主文件中(通常是 main.js 或 index.js):
const { app, BrowserWindow, Menu } = require('electron');

let mainWindow;

app.on('ready', () => {
  mainWindow = new BrowserWindow({ width: 800, height: 600 });

  mainWindow.loadFile('index.html'); // 加载你的 HTML 文件

  // 创建菜单模板
  const template = [
    {
      label: 'File',
      submenu: [
        {
          label: 'Open',
          click: () => {
            // 处理 "Open" 命令的逻辑
            console.log('Open command clicked!');
          }
        },
        {
          label: 'Save',
          click: () => {
            // 处理 "Save" 命令的逻辑
            console.log('Save command clicked!');
          }
        },
        {
          label: 'Quit',
          click: () => {
            // 处理 "Quit" 命令的逻辑
            app.quit();
          }
        }
      ]
    }
  ];

  // 创建菜单对象
  const menu = Menu.buildFromTemplate(template);

  // 将菜单设置为应用程序菜单
  Menu.setApplicationMenu(menu);
});

在这个例子中,我们通过创建一个菜单模板 template,定义了一个包含 "File" 菜单的简单菜单结构。每个菜单项都有一个 click 属性,它指定了在点击菜单项时要执行的回调函数。

最后,通过调用 Menu.buildFromTemplate(template) 创建菜单对象,并使用 Menu.setApplicationMenu(menu) 将其设置为应用程序菜单。

请注意,如果你不想在应用程序中显示菜单栏,你可以将 Menu.setApplicationMenu(menu) 调用省略,这样就不会在窗口顶部显示菜单栏。你仍然可以通过其他方式触发菜单,例如右键单击或使用快捷键。

这只是一个简单的例子,你可以根据应用的需要创建更复杂的菜单结构和处理逻辑。


转载请注明出处:http://www.pingtaimeng.com/article/detail/10922/Electron