应用菜单

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

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

构建应用菜单

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

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

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

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://electronjs.org')
        }
      }
    ]
  }
]

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

info

在 macOS 上，应用菜单的第一个子菜单将总是以你的应用程序的名称作为它的标签。 通常来说，你可以通过有条件地增加带有 appMenu 角色的菜单项，来组成这个子菜单。

提示

关于可用角色的其他描述，请参阅菜单指南的 MenuItem 角色 部分。

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

明确定义每个子菜单会非常冗余。 如果你想要在应用中重用默认子菜单，你可以使用 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://electronjs.org')
        }
      }
    ]
  }
]

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

note

在 macOS 上，help 角色定义了一个顶层帮助子菜单，其中包含一个对于其他菜单项的搜索栏。 它需要将菜单项添加到它的子菜单中才能起作用。

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

因为在 Windows 和 Linux 中，根应用菜单存在于每个 BaseWindow 上，你可以使用窗口特有的 Menu 实例并通过 win.setMenu 方法来重写它。

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)

提示

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