Skip to main content

应用菜单

¥Application Menu

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

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

  • 在 macOS 上，此菜单显示在系统 菜单栏 中。

    ¥On macOS, this menu is shown in the system menu bar.

  • 在 Windows 和 Linux 上，此菜单显示在每个 BaseWindow 的顶部。

    ¥On Windows and Linux, this menu is shown at the top of each 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)

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

¥[!IMPORTANT] On macOS, the first submenu of the application menu will always have your application's name as its label. In general, you can populate this submenu by conditionally adding a menu item with the appMenu role.

[!TIP] 有关可用角色的更多描述，请参阅通用菜单指南的 MenuItem 角色 部分。

¥[!TIP] For additional descriptions of available roles, see the MenuItem roles section of the general Menus guide.

使用标准 OS 菜单角色​

¥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)

[!注意] 在 macOS 上，help 角色定义了一个顶层“帮助”子菜单，其中包含用于其他菜单项的搜索栏。它需要将项目添加到其 submenu 才能运行。

¥[!NOTE] On macOS, the help role defines a top-level Help submenu that has a search bar for other menu items. It requires items to be added to its submenu to function.

设置特定于窗口的应用菜单 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 来移除特定窗口的应用菜单。

¥[!TIP] You can remove a specific window's application menu by calling the win.removeMenu API.