画面 | Menu

创建本机应用程序菜单和上下文菜单

过程：主

`new Menu()`

创建一个新的菜单。

静态方法

menu有下列静态方法：

`Menu.setApplicationMenu(menu)`

menu Menu

设置menu为 macOS 上的应用程序菜单。在 Windows 和 Linux 上，menu将被设置为每个窗口的顶层菜单。

通过null将删除 Windows 和 Linux 上的菜单栏，但对 macOS 没有影响。

注意：必须在模块ready事件后调用此 API app。

`Menu.getApplicationMenu()`

返回Menu- 应用程序菜单（如果已设置），或者null，如果未设置。

注意：返回的Menu实例不支持动态添加或删除菜单项。实例属性仍然可以动态修改。

`Menu.sendActionToFirstResponder(action)` macOS

action 串

发送action给应用程序的第一个响应者。这用于模拟默认的 macOS 菜单行为。通常你只会使用role属性MenuItem。

有关 macOS 本机操作的更多信息，请参阅 macOS Cocoa 事件处理指南。

`Menu.buildFromTemplate(template)`

template MenuItemConstructorOptions []

返回 Menu

通常，这template只是一个options用于构造 MenuItem 的数组。用法可以参考上面。

您还可以将其他字段附加到该元素，template并且它们将成为构建的菜单项的属性。

实例方法

menu对象具有以下实例方法：

`menu.popup([browserWindow, options])`

browserWindow BrowserWindow（可选） - 默认为焦点窗口。
options 对象（可选）
- xNumber（可选） - Default 是当前鼠标的光标位置。如果声明，则必须y声明。
- yNumber（可选） - Default 是当前鼠标的光标位置。如果声明，则必须x声明。
- asyncBoolean（可选） - 设置为true立即调用此方法，false以在选择或关闭菜单后返回。默认为false。
- positioningItemNumber（可选）macOS - 要放置在指定坐标下的鼠标光标下的菜单项的索引。默认值是-1。

弹出此菜单作为上下文菜单browserWindow。

`menu.closePopup([browserWindow])`

browserWindow BrowserWindow（可选） - 默认为焦点窗口。

关闭上下文菜单browserWindow。

`menu.append(menuItem)`

menuItem MenuItem

追加menuItem到菜单。

`menu.insert(pos, menuItem)`

pos 整数
menuItem 菜单项

插入menuItem到pos菜单的位置。

Instance Properties

menu 对象还具有以下属性：

`menu.items`

一个MenuItem[]包含菜单的items数组。

每个Menu由多个MenuItems 组成，每个MenuItem可以有一个子菜单。

例子

Menu是唯一的主要工序，但您还可以通过使用它在渲染过程中remote的模块。

主要过程

使用简单模板 API 在主进程中创建应用程序菜单的示例：

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

const template = [
  {
    label: 'Edit',
    submenu: [
      {role: 'undo'},
      {role: 'redo'},
      {type: 'separator'},
      {role: 'cut'},
      {role: 'copy'},
      {role: 'paste'},
      {role: 'pasteandmatchstyle'},
      {role: 'delete'},
      {role: 'selectall'}
    ]
  },
  {
    label: 'View',
    submenu: [
      {role: 'reload'},
      {role: 'forcereload'},
      {role: 'toggledevtools'},
      {type: 'separator'},
      {role: 'resetzoom'},
      {role: 'zoomin'},
      {role: 'zoomout'},
      {type: 'separator'},
      {role: 'togglefullscreen'}
    ]
  },
  {
    role: 'window',
    submenu: [
      {role: 'minimize'},
      {role: 'close'}
    ]
  },
  {
    role: 'help',
    submenu: [
      {
        label: 'Learn More',
        click () { require('electron').shell.openExternal('https://electron.atom.io') }
      }
    ]
  }
]

if (process.platform === 'darwin') {
  template.unshift({
    label: app.getName(),
    submenu: [
      {role: 'about'},
      {type: 'separator'},
      {role: 'services', submenu: []},
      {type: 'separator'},
      {role: 'hide'},
      {role: 'hideothers'},
      {role: 'unhide'},
      {type: 'separator'},
      {role: 'quit'}
    ]
  })

  // Edit menu
  template[1].submenu.push(
    {type: 'separator'},
    {
      label: 'Speech',
      submenu: [
        {role: 'startspeaking'},
        {role: 'stopspeaking'}
      ]
    }
  )

  // Window menu
  template[3].submenu = [
    {role: 'close'},
    {role: 'minimize'},
    {role: 'zoom'},
    {type: 'separator'},
    {role: 'front'}
  ]
}

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

渲染过程

以下是通过使用remote模块在网页（渲染过程）中动态创建菜单并在用户右键单击页面时显示它的示例：

<!-- index.html -->
<script>
const {remote} = require('electron')
const {Menu, MenuItem} = remote

const menu = new Menu()
menu.append(new MenuItem({label: 'MenuItem1', click() { console.log('item 1 clicked') }}))
menu.append(new MenuItem({type: 'separator'}))
menu.append(new MenuItem({label: 'MenuItem2', type: 'checkbox', checked: true}))

window.addEventListener('contextmenu', (e) => {
  e.preventDefault()
  menu.popup(remote.getCurrentWindow())
}, false)
</script>

关于 macOS 应用程序菜单的说明

macOS 在 Windows 和 Linux 上具有完全不同的应用程序菜单风格。这里有一些关于如何让你的应用程序的菜单更像本机的说明。

标准菜单

在 macOS 上有许多系统定义的标准菜单，如菜单Services和Windows菜单。要使您的菜单成为标准菜单，您应该将菜单设置role为以下之一，并且 Electron 会识别它们并使其成为标准菜单：

window
help
services

标准菜单项操作

MACOS 已经为一些菜单项，如提供的标准动作About xxx，Hide xxx和Hide Others。要将菜单项的操作设置为标准操作，应该设置role菜单项的属性。

主菜单的名称

在 macOS 上，无论您设置了什么标签，应用程序菜单的第一个项目的标签始终是您应用程序的名称。要更改它，请修改您的应用程序包的Info.plist文件。有关更多信息，请参阅关于信息属性列表文件

特定浏览器窗口的设置菜单（Linux Windows）

浏览器窗口的setMenu方法可以设置某些浏览器窗口的菜单。

菜单项目位置

您可以利用position和id控制在构建菜单时物品的放置方式Menu.buildFromTemplate。

该position属性MenuItem具有表单[placement]=[id]，其中placement之一是before，after或endof和id是菜单中现有项目的唯一 ID：

before - 在id参考项目之前插入此项目。如果引用的项目不存在，该项目将被插入到菜单的末尾。
after - 在id参考项目后插入此项目。如果引用的项目不存在，该项目将被插入到菜单的末尾。
endof - 将此项目插入包含id引用项目的逻辑组的末尾（组由分隔符项目创建）。如果引用的项目不存在，则使用给定的ID创建一个新的分隔符组，并在该分隔符后面插入此项目。

放置物品时，所有未放置的物品都会插入其后，直到放置新物品。所以如果你想在同一个位置放置一组菜单项，你只需要为第一个项目指定一个位置。

例子

模板：

[
  {label: '4', id: '4'},
  {label: '5', id: '5'},
  {label: '1', id: '1', position: 'before=4'},
  {label: '2', id: '2'},
  {label: '3', id: '3'}
]

菜单：

- 1
- 2
- 3
- 4
- 5

模板：

[
  {label: 'a', position: 'endof=letters'},
  {label: '1', position: 'endof=numbers'},
  {label: 'b', position: 'endof=letters'},
  {label: '2', position: 'endof=numbers'},
  {label: 'c', position: 'endof=letters'},
  {label: '3', position: 'endof=numbers'}
]

菜单：

- ---
- a
- b
- c
- ---
- 1
- 2
- 3

本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com

最后更新于：2017-12-18

new Menu()