Menu

Class: Menu

Create native application menus and context menus.创建本机应用程序菜单和上下文菜单。

Process:进程：Main

new Menu()

Creates a new menu.创建一个新菜单。

Static Methods静态方法

The Menu class has the following static methods:Menu类具有以下静态方法：

Menu.setApplicationMenu(menu)

• menu Menu | null

Sets menu as the application menu on macOS. 将menu设置为macOS上的应用程序菜单。On Windows and Linux, the menu will be set as each window's top menu.在Windows和Linux上，menu将被设置为每个窗口的顶部菜单。

Also on Windows and Linux, you can use a & in the top-level item name to indicate which letter should get a generated accelerator. 同样在Windows和Linux上，您可以在顶级项名称中使用&来指示哪个字母应该获得生成的加速器。For example, using &File for the file menu would result in a generated Alt-F accelerator that opens the associated menu. 例如，使用&File作为文件菜单会生成一个Alt-F加速器，打开相关菜单。The indicated character in the button label then gets an underline, and the & character is not displayed on the button label.然后，按钮标签中指示的字符会出现下划线，并且&字符不会显示在按钮标签上。

In order to escape the & character in an item name, add a proceeding &. 若要转义项名称中的&字符，请添加一个前导&。For example, &&File would result in &File displayed on the button label.例如，&&File会导致&File显示在按钮标签上。

Passing null will suppress the default menu. 传递null将抑制默认菜单。On Windows and Linux, this has the additional effect of removing the menu bar from the window.在Windows和Linux上，这具有从窗口中删除菜单栏的额外效果。

Note: The default menu will be created automatically if the app does not set one. 如果应用程序未设置默认菜单，则会自动创建默认菜单。It contains standard items such as File, Edit, View, Window and Help.它包含标准项，如“文件”、“编辑”、“视图”、“窗口”和“帮助”。

Menu.getApplicationMenu()

Returns返回Menu | null - The application menu, if set, or null, if not set.应用程序菜单（如果已设置）或null（如果未设置）。

Note: The returned Menu instance doesn't support dynamic addition or removal of menu items. 返回的Menu实例不支持动态添加或删除菜单项。Instance properties can still be dynamically modified.实例属性仍然可以动态修改。

Menu.sendActionToFirstResponder(action) macOS

• action string

Sends the action to the first responder of application. 将action发送到应用程序的第一个响应程序。This is used for emulating default macOS menu behaviors. 这用于模拟默认的macOS菜单行为。Usually you would use the role property of a MenuItem.通常您会使用MenuItem的role属性。

See the macOS Cocoa Event Handling Guide for more information on macOS' native actions.有关macOS本机操作的更多信息，请参阅macOS Cocoa事件处理指南。

Menu.buildFromTemplate(template)

• template (MenuItemConstructorOptions | MenuItem)[]

Returns返回Menu

Generally, the template is an array of options for constructing a MenuItem. 通常，template是一组用于构建MenuItem的options。The usage can be referenced above.使用方法可以在上面参考。

You can also attach other fields to the element of the template and they will become properties of the constructed menu items.您还可以将其他字段附加到template的元素，它们将成为构建菜单项的属性。

Instance Methods实例方法

The menu object has the following instance methods:menu对象具有以下实例方法：

menu.popup([options])

• options Object (optional)
  • window BrowserWindow (optional) - Default is the focused window.默认为聚焦窗口。
  • x number (optional) - Default is the current mouse cursor position. 默认值为当前鼠标游标位置。Must be declared if y is declared.如果已声明y，则必须声明。
  • y number (optional) - Default is the current mouse cursor position. 默认值为当前鼠标游标位置。Must be declared if x is declared.如果已声明x，则必须声明。
  • positioningItem number (optional) macOS - The index of the menu item to be positioned under the mouse cursor at the specified coordinates. 要定位在鼠标游标下指定坐标处的菜单项的索引。Default is -1.默认值为-1。
  • callback Function (optional) - Called when menu is closed.当菜单关闭时调用。

Pops up this menu as a context menu in the BrowserWindow.在BrowserWindow中弹出此菜单作为上下文菜单。

menu.closePopup([browserWindow])

• browserWindow BrowserWindow (optional) - Default is the focused window.默认为聚焦窗口。

Closes the context menu in the browserWindow.关闭browserWindow中的上下文菜单。

menu.append(menuItem)

• menuItem MenuItem

Appends the menuItem to the menu.将menuItem追加到菜单中。

menu.getMenuItemById(id)

• id string

Returns返回MenuItem | null the item with the specified id具有指定id的项目

menu.insert(pos, menuItem)

• pos Integer
• menuItem MenuItem

Inserts the menuItem to the pos position of the menu.将menuItem插入到pos的位置。

Instance Events实例事件

Objects created with new Menu or returned by Menu.buildFromTemplate emit the following events:使用new Menu创建的对象或Menu.buildFromTemplate返回的对象会发出以下事件：

Note: Some events are only available on specific operating systems and are labeled as such.某些事件仅在特定的操作系统上可用，并被标记为这样。

Event: 'menu-will-show'

Returns:返回：

• event Event

Emitted when menu.popup() is called.在调用menu.popup()时发出。

Event: 'menu-will-close'

Returns:返回：

• event Event

Emitted when a popup is closed either manually or with menu.closePopup().当手动或使用menu.closePopup()关闭弹出窗口时发出。

Instance Properties实例属性

menu objects also have the following properties:对象还具有以下属性：

menu.items

A MenuItem[] array containing the menu's items.包含菜单项的MenuItem[]数组。

Each Menu consists of multiple MenuItems and each MenuItem can have a submenu.每个Menu由多个MenuItem组成，每个MenuItem可以有一个子菜单。

Examples示例

An example of creating the application menu with the simple template API:使用简单模板API创建应用程序菜单的示例：

const { app, Menu } = require('electron')

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)

Render process渲染过程

To create menus initiated by the renderer process, send the required information to the main process using IPC and have the main process display the menu on behalf of the renderer.要创建由渲染器进程启动的菜单，请使用IPC将所需信息发送到主进程，并让主进程代表渲染器显示菜单。

Below is an example of showing a menu when the user right clicks the page:以下是用户右键单击页面时显示菜单的示例：

// renderer
window.addEventListener('contextmenu', (e) => {
  e.preventDefault()
  ipcRenderer.send('show-context-menu')
})

ipcRenderer.on('context-menu-command', (e, command) => {
  // ...
})

// main
ipcMain.on('show-context-menu', (event) => {
  const template = [
    {
      label: 'Menu Item 1',
      click: () => { event.sender.send('context-menu-command', 'menu-item-1') }
    },
    { type: 'separator' },
    { label: 'Menu Item 2', type: 'checkbox', checked: true }
  ]
  const menu = Menu.buildFromTemplate(template)
  menu.popup(BrowserWindow.fromWebContents(event.sender))
})

Notes on macOS Application MenumacOS应用程序菜单注释

macOS has a completely different style of application menu from Windows and Linux. Here are some notes on making your app's menu more native-like.macOS的应用程序菜单风格与Windows和Linux完全不同。以下是一些关于让应用程序的菜单更像本地菜单的注意事项。

Standard Menus标准菜单

On macOS there are many system-defined standard menus, like the Services and Windows menus. 在macOS上有许多系统定义的标准菜单，如服务和Windows菜单。To make your menu a standard menu, you should set your menu's role to one of the following and Electron will recognize them and make them become standard menus:要使菜单成为标准菜单，您应该将菜单的role设置为以下其中一个，Electron将识别它们并使其成为标准菜单：

• window
• help
• services

Standard Menu Item Actions标准菜单项操作

macOS has provided standard actions for some menu items, like About xxx, Hide xxx, and Hide Others. macOS为一些菜单项提供了标准操作，如About xxx、Hide xxx和Hide Others。To set the action of a menu item to a standard action, you should set the role attribute of the menu item.要将菜单项的操作设置为标准操作，您应该设置菜单项的role属性。

Main Menu's Name主菜单名称

On macOS the label of the application menu's first item is always your app's name, no matter what label you set. 在macOS上，无论您设置了什么标签，应用程序菜单第一项的标签都始终是应用程序的名称。To change it, modify your app bundle's Info.plist file. 要更改它，请修改应用程序捆绑包的Info.plist文件。See About Information Property List Files for more information.有关详细信息，请参阅关于信息特性列表文件。

Setting Menu for Specific Browser Window特定浏览器窗口的设置菜单 (Linux Windows)

The setMenu method of browser windows can set the menu of certain browser windows.浏览器窗口的setMenu方法可以设置某些浏览器窗口的菜单。

Menu Item Position菜单项位置

You can make use of before, after, beforeGroupContaining, afterGroupContaining and id to control how the item will be placed when building a menu with Menu.buildFromTemplate.使用Menu.buildFromTemplate构建菜单时，可以使用before、after、beforeGroupContaining、afterGroupContainting和id来控制项的放置方式。

• before - Inserts this item before the item with the specified label. 在具有指定标签的项目之前插入此项目。If the referenced item doesn't exist the item will be inserted at the end of the menu. 如果引用的项目不存在，则该项目将插入到菜单的末尾。Also implies that the menu item in question should be placed in the same “group” as the item.也意味着有问题的菜单项应该与该菜单项放在同一个“组”中。
• after - Inserts this item after the item with the specified label. 在具有指定标签的项目之后插入此项目。If the referenced item doesn't exist the item will be inserted at the end of the menu. 如果引用的项目不存在，则该项目将插入到菜单的末尾。Also implies that the menu item in question should be placed in the same “group” as the item.也意味着有问题的菜单项应该与该菜单项放在同一个“组”中。
• beforeGroupContaining - Provides a means for a single context menu to declare the placement of their containing group before the containing group of the item with the specified label.为单个上下文菜单提供一种方法，用于在具有指定标签的项目的包含组之前声明其包含组的位置。
• afterGroupContaining - Provides a means for a single context menu to declare the placement of their containing group after the containing group of the item with the specified label.为单个上下文菜单提供一种方法，用于声明其包含组在具有指定标签的项目的包含组之后的位置。

By default, items will be inserted in the order they exist in the template unless one of the specified positioning keywords is used.默认情况下，除非使用指定的定位关键字之一，否则项目将按其在模板中的存在顺序插入。

Examples示例

Template:模板：

[
  { id: '1', label: 'one' },
  { id: '2', label: 'two' },
  { id: '3', label: 'three' },
  { id: '4', label: 'four' }
]

Menu:菜单：

- 1
- 2
- 3
- 4

Template:模板：

[
  { id: '1', label: 'one' },
  { type: 'separator' },
  { id: '3', label: 'three', beforeGroupContaining: ['1'] },
  { id: '4', label: 'four', afterGroupContaining: ['2'] },
  { type: 'separator' },
  { id: '2', label: 'two' }
]

Menu:菜单

- 3
- 4
- ---
- 1
- ---
- 2

Template:模板

[
  { id: '1', label: 'one', after: ['3'] },
  { id: '2', label: 'two', before: ['1'] },
  { id: '3', label: 'three' }
]

Menu:菜单

- ---
- 3
- 2
- 1