应用菜单

🌐 Application Menu

每个 Electron 应用都有一个顶层应用菜单。

🌐 Each Electron app has a single top-level application menu.

在 macOS 上，此菜单显示在系统菜单栏中。
在 Windows 和 Linux 上，此菜单显示在每个 BaseWindow 的顶部。

构建应用菜单

🌐 Building application menus

可以通过将一个 Menu 实例传递给 Menu.setApplicationMenu 静态函数来设置应用菜单。

🌐 The application menu can be set by passing a Menu instance into the Menu.setApplicationMenu static function.

在 Electron 中构建应用菜单时，每个顶层数组菜单项必须是子菜单。

🌐 When building an application menu in Electron, each top-level array menu item must be a submenu.

如果从未调用此 API，Electron 将为你的应用设置默认菜单。下面是一个示例，演示如何使用简写 MenuItem 角色手动创建该默认菜单。

🌐 Electron will set a default menu for your app if this API is never called. Below is an example of that default menu being created manually using shorthand MenuItem roles.

Manually creating the default menu
const { shell } = require('electron/common')
const { app, Menu } = require('electron/main')

const isMac = process.platform === 'darwin'
const template = [
  // { role: 'appMenu' }
  ...(isMac
    ? [{
        label: app.name,
        submenu: [
          { role: 'about' },
          { type: 'separator' },
          { role: 'services' },
          { type: 'separator' },
          { role: 'hide' },
          { role: 'hideOthers' },
          { role: 'unhide' },
          { type: 'separator' },
          { role: 'quit' }
        ]
      }]
    : []),
  // { role: 'fileMenu' }
  {
    label: 'File',
    submenu: [
      isMac ? { role: 'close' } : { role: 'quit' }
    ]
  },
  // { role: 'editMenu' }
  {
    label: 'Edit',
    submenu: [
      { role: 'undo' },
      { role: 'redo' },
      { type: 'separator' },
      { role: 'cut' },
      { role: 'copy' },
      { role: 'paste' },
      ...(isMac
        ? [
            { role: 'pasteAndMatchStyle' },
            { role: 'delete' },
            { role: 'selectAll' },
            { type: 'separator' },
            {
              label: 'Speech',
              submenu: [
                { role: 'startSpeaking' },
                { role: 'stopSpeaking' }
              ]
            }
          ]
        : [
            { role: 'delete' },
            { type: 'separator' },
            { role: 'selectAll' }
          ])
    ]
  },
  // { role: 'viewMenu' }
  {
    label: 'View',
    submenu: [
      { role: 'reload' },
      { role: 'forceReload' },
      { role: 'toggleDevTools' },
      { type: 'separator' },
      { role: 'resetZoom' },
      { role: 'zoomIn' },
      { role: 'zoomOut' },
      { type: 'separator' },
      { role: 'togglefullscreen' }
    ]
  },
  // { role: 'windowMenu' }
  {
    label: 'Window',
    submenu: [
      { role: 'minimize' },
      { role: 'zoom' },
      ...(isMac
        ? [
            { type: 'separator' },
            { role: 'front' },
            { type: 'separator' },
            { role: 'window' }
          ]
        : [
            { role: 'close' }
          ])
    ]
  },
  {
    role: 'help',
    submenu: [
      {
        label: 'Learn More',
        click: async () => {
          const { shell } = require('electron')
          await shell.openExternal('https://electron.nodejs.cn')
        }
      }
    ]
  }
]

const menu = Menu.buildFromTemplate(template)
Menu.setApplicationMenu(menu)

info

在 macOS 上，应用菜单的第一个子菜单总是会以你的应用名称作为其标签。通常，你可以通过有条件地添加一个具有 appMenu 角色的菜单项来填充此子菜单。

tip

有关可用角色的更多描述，请参阅常规菜单指南中的 MenuItem 角色部分。

🌐 Using standard OS menu roles

明确定义每个子菜单可能会非常冗长。如果你想在应用中重用默认子菜单，可以使用 Electron 提供的各种与子菜单相关的角色。

🌐 Defining each submenu explicitly can get very verbose. If you want to re-use default submenus in your app, you can use various submenu-related roles provided by Electron.

Using default roles for each submenu
const { shell } = require('electron/common')
const { app, Menu } = require('electron/main')

const template = [
  ...(process.platform === 'darwin'
    ? [{ role: 'appMenu' }]
    : []),
  { role: 'fileMenu' },
  { role: 'editMenu' },
  { role: 'viewMenu' },
  { role: 'windowMenu' },
  {
    role: 'help',
    submenu: [
      {
        label: 'Learn More',
        click: async () => {
          const { shell } = require('electron')
          await shell.openExternal('https://electron.nodejs.cn')
        }
      }
    ]
  }
]

const menu = Menu.buildFromTemplate(template)
Menu.setApplicationMenu(menu)

note

在 macOS 上，help 角色定义了一个顶层帮助子菜单，该子菜单具有用于搜索其他菜单项的搜索栏。它需要将项目添加到其 submenu 中才能正常工作。

设置特定窗口的应用菜单 Linux Windows

🌐 Setting window-specific application menus Linux Windows

由于根应用菜单存在于 Windows 和 Linux 上的每个 BaseWindow，你可以通过 win.setMenu 方法使用特定窗口的 Menu 实例来覆盖它。

🌐 Since the root application menu exists on each BaseWindow on Windows and Linux, you can override it with a window-specific Menu instance via the win.setMenu method.

Override a window
const { BrowserWindow, Menu } = require('electron/main')

const win = new BrowserWindow()
const menu = Menu.buildFromTemplate([
  {
    label: 'my custom menu',
    submenu: [
      { role: 'copy' },
      { role: 'paste' }
    ]
  }
])
win.setMenu(menu)

tip

你可以通过调用 win.removeMenu API 来移除特定窗口的应用菜单。

构建应用菜单​

使用标准 OS 菜单角色​

设置特定窗口的应用菜单 Linux Windows​

构建应用菜单

使用标准 OS 菜单角色

设置特定窗口的应用菜单 Linux Windows