应用程序菜单

每个 Electron 应用都有一个顶级的应用程序菜单。

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

构建应用程序菜单

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

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

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

手动创建默认菜单

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.js.cn')
        }
      }
    ]
  }
]

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

信息

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

提示

有关可用角色的更多说明，请参阅通用菜单指南的 MenuItem roles 部分。

使用标准的操作系统菜单角色

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

为每个子菜单使用默认角色

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.js.cn')
        }
      }
    ]
  }
]

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

注意

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

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

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

覆盖窗口

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)

提示

您可以通过调用 win.removeMenu API 来删除特定窗口的应用程序菜单。