Electron 中如何创建自定义菜单？

推荐答案

在 Electron 中创建自定义菜单可以通过 Menu 模块来实现。以下是一个简单的示例代码，展示如何创建自定义菜单：

// www.javascriptcn.com code example
const { app, Menu } = require('electron');

// 定义菜单模板
const template = [
  {
    label: '文件',
    submenu: [
      {
        label: '新建',
        click: () => {
          console.log('新建文件');
        }
      },
      {
        label: '打开',
        click: () => {
          console.log('打开文件');
        }
      },
      { type: 'separator' },
      {
        label: '退出',
        role: 'quit'
      }
    ]
  },
  {
    label: '编辑',
    submenu: [
      { role: 'undo' },
      { role: 'redo' },
      { type: 'separator' },
      { role: 'cut' },
      { role: 'copy' },
      { role: 'paste' }
    ]
  }
];

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

// 设置应用菜单
Menu.setApplicationMenu(menu);

本题详细解读

1. 引入 Menu 模块

首先，我们需要从 electron 模块中引入 Menu 和 app。Menu 模块用于创建和管理应用程序的菜单，而 app 模块用于控制应用程序的生命周期。

const { app, Menu } = require('electron');

2. 定义菜单模板

菜单模板是一个数组，每个元素代表一个菜单项。每个菜单项可以包含 label（标签）、submenu（子菜单）、click（点击事件处理函数）等属性。

// www.javascriptcn.com code example
const template = [
  {
    label: '文件',
    submenu: [
      {
        label: '新建',
        click: () => {
          console.log('新建文件');
        }
      },
      {
        label: '打开',
        click: () => {
          console.log('打开文件');
        }
      },
      { type: 'separator' },
      {
        label: '退出',
        role: 'quit'
      }
    ]
  },
  {
    label: '编辑',
    submenu: [
      { role: 'undo' },
      { role: 'redo' },
      { type: 'separator' },
      { role: 'cut' },
      { role: 'copy' },
      { role: 'paste' }
    ]
  }
];

3. 创建菜单

使用 Menu.buildFromTemplate 方法将菜单模板转换为菜单对象。

const menu = Menu.buildFromTemplate(template);

4. 设置应用菜单

最后，使用 Menu.setApplicationMenu 方法将创建的菜单设置为应用程序的菜单。

Menu.setApplicationMenu(menu);

5. 菜单项的角色（Role）

Electron 提供了一些内置的菜单项角色（如 undo, redo, cut, copy, paste, quit 等），这些角色会自动绑定到相应的功能上。使用这些角色可以简化菜单的创建过程。

{ role: 'quit' }

6. 自定义点击事件

对于没有内置角色的菜单项，可以通过 click 属性来定义点击事件的处理函数。

click: () => {
  console.log('新建文件');
}

通过以上步骤，你可以在 Electron 应用程序中创建自定义菜单，并根据需要添加各种功能。