应用程序菜单¶

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

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

构建应用程序菜单¶

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

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

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

```js title='Manually creating the default menu' @ts-expect-error=[107] 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)

> [!IMPORTANT]
> 在 macOS 上，应用程序菜单的第一个子菜单**始终**会以你的应用名称
> 作为其标签。通常，你可以通过有条件地添加一个具有
> `appMenu` 角色的菜单项来填充此子菜单。

> [!TIP]
> 有关可用角色的更多说明，请参阅通用菜单指南中的
> [`MenuItem` 角色](menus.md#roles) 部分。

### 使用标准操作系统菜单角色 {#using-standard-os-menu-roles}

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

```js title='Using default roles for each submenu' @ts-expect-error=[26]
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 角色定义了一个顶层“帮助”子菜单，其中包含用于 其他菜单项的搜索栏。它需要向其 submenu 添加项才能正常工作。

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

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

```js title='Override a window's 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) ```

[!TIP] 你可以通过调用 win.removeMenu API 来移除特定窗口的应用程序菜单。