菜单

创建原生应用菜单和上下文菜单。

进程:主进程

new Menu()

创建新菜单。

静态方法

menu类有以下静态方法:

Menu.setApplicationMenu(menu)

  • menu Menu | null当在MacOS、Windows、Linux中使用menu设置程序菜单时,会设置在各个程序窗体的顶层。

在Windows和Linux中,可以在菜单的顶层标签的某个字母前添加&以绑定快捷键。 例如,使用&File后可以使用Alt-F呼出File的子选项。 被绑定快捷键的字母将会以下划线标出。 &并不会在运行时显示

使用null 作为参数时将会隐藏默认菜单。在Windows和Linux上还有删除菜单的额外效果。

Note: 如果没有在app中设置一个菜单,系统会自动生成一个默认菜单, 默认生成的菜单中包含了一些初始选项,例如 文件,编辑, 视图,窗口,帮助

Menu.getApplicationMenu()

返回 Menu | null - 如果有设置, 则返回应用程序菜单, 如果没设置,则返回 null

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

Menu.sendActionToFirstResponder(action) macOS

  • action String将 action 发送到应用程序的第一个响应方。 这用于模拟默认的 macOS 菜单行为。 通常你可以使用MenuItemrole属性

有关 macOS 的本地操作的详细信息, 请参阅 macOS Cocoa Event Handling Guide

Menu.buildFromTemplate(template)

  • template (MenuItemConstructorOptions | MenuItem)[]返回 Menu

一般来说 template是一个options类型的数组,用于构建一个 MenuItem。使用情况可以在上文提及。

You can also attach other fields to the element of the template and they will become properties of the constructed menu items.

实例方法

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

menu.popup(options)

  • options Object (可选)

    • window BrowserWindow (可选) - 默认为选中窗口.
    • x 数字 (可选)-默认值是当前鼠标光标的位置。如果声明了 y, 则必须声明。
    • y 数字 (可选)-默认值是当前鼠标光标的位置。如果声明了 x, 则必须声明。
    • positioningItem数字 (可选) macOS -要在指定坐标下的鼠标光标下定位的菜单项的索引。默认值为-1。
    • callback Function (optional) - 会在菜单关闭后被调用.将此菜单作为 browserWindow 中的上下文菜单弹出。

menu.closePopup([browserWindow])

  • browserWindow BrowserWindow (可选) - 默认为选中窗口.关闭 browserWindow 中的上下文菜单。

menu.append(menuItem)

  • menuItem 菜单项 menuItem 追加到菜单。

menu.getMenuItemById(id)

  • id String返回具有指定id项的MenuItem

menu.insert(pos, menuItem)

  • pos Integer
  • menuItem 菜单项 menuItem 插入菜单的 pos 位置。

实例事件

Objects created with new Menu or returned by Menu.buildFromTemplate emit the following events:

注意: 某些事件仅在特定的操作系统上可用, 这些方法会被标记出来。

事件: 'menu-will-show'

返回:

  • event Event调用menu.popup()事件时触发该事件。

事件: 'menu-will-close'

返回:

  • event Event手动关闭弹出,或使用 menu.closePopup()方法关闭弹出时,触发该事件。

实例属性

menu 对象还具有以下属性:

menu.items

包含菜单项的 MenuItem [] 数组。

每个 菜单 由多个 MenuItem 组成, 每个 MenuItem 可以有子菜单。

示例

Menu 仅在主进程( main process)中可用, 但您也可以在渲染进程(render process)中通过 remote 模块使用它。

主进程

在主进程中创建程序菜单的简单API模版示例:

  1. const { app, Menu } = require('electron')
  2. const template = [
  3. // { role: 'appMenu' }
  4. ...(process.platform === 'darwin' ? [{
  5. label: app.getName(),
  6. submenu: [
  7. { role: 'about' },
  8. { type: 'separator' },
  9. { role: 'services' },
  10. { type: 'separator' },
  11. { role: 'hide' },
  12. { role: 'hideothers' },
  13. { role: 'unhide' },
  14. { type: 'separator' },
  15. { role: 'quit' }
  16. ]
  17. }] : []),
  18. // { role: 'fileMenu' }
  19. {
  20. label: 'File',
  21. submenu: [
  22. isMac ? { role: 'close' } : { role: 'quit' }
  23. ]
  24. },
  25. // { role: 'editMenu' }
  26. {
  27. label: 'Edit',
  28. submenu: [
  29. { role: 'undo' },
  30. { role: 'redo' },
  31. { type: 'separator' },
  32. { role: 'cut' },
  33. { role: 'copy' },
  34. { role: 'paste' },
  35. ...(isMac ? [
  36. { role: 'pasteAndMatchStyle' },
  37. { role: 'delete' },
  38. { role: 'selectAll' },
  39. { type: 'separator' },
  40. {
  41. label: 'Speech',
  42. submenu: [
  43. { role: 'startspeaking' },
  44. { role: 'stopspeaking' }
  45. ]
  46. }
  47. ] : [
  48. { role: 'delete' },
  49. { type: 'separator' },
  50. { role: 'selectAll' }
  51. ])
  52. ]
  53. },
  54. // { role: 'viewMenu' }
  55. {
  56. label: 'View',
  57. submenu: [
  58. { role: 'reload' },
  59. { role: 'forcereload' },
  60. { role: 'toggledevtools' },
  61. { type: 'separator' },
  62. { role: 'resetzoom' },
  63. { role: 'zoomin' },
  64. { role: 'zoomout' },
  65. { type: 'separator' },
  66. { role: 'togglefullscreen' }
  67. ]
  68. },
  69. // { role: 'windowMenu' }
  70. {
  71. label: 'Window',
  72. submenu: [
  73. { role: 'minimize' },
  74. { role: 'zoom' },
  75. ...(isMac ? [
  76. { type: 'separator' },
  77. { role: 'front' },
  78. { type: 'separator' },
  79. { role: 'window' }
  80. ] : [
  81. { role: 'close' }
  82. ])
  83. ]
  84. },
  85. {
  86. role: 'help',
  87. submenu: [
  88. {
  89. label: 'Learn More',
  90. click: async () => {
  91. const { shell } = require('electron')
  92. await shell.openExternal('https://electronjs.org')
  93. }
  94. }
  95. ]
  96. }
  97. ]
  98. const menu = Menu.buildFromTemplate(template)
  99. Menu.setApplicationMenu(menu)

渲染进程

下面是通过 remote 模块在网页(render process)中动态创建右击菜单的示例:

  1. <!-- index.html -->
  2. <script>
  3. const { remote } = require('electron')
  4. const { Menu, MenuItem } = remote
  5. const menu = new Menu()
  6. menu.append(new MenuItem({ label: 'MenuItem1', click() { console.log('item 1 clicked') } }))
  7. menu.append(new MenuItem({ type: 'separator' }))
  8. menu.append(new MenuItem({ label: 'MenuItem2', type: 'checkbox', checked: true }))
  9. window.addEventListener('contextmenu', (e) => {
  10. e.preventDefault()
  11. menu.popup({ window: remote.getCurrentWindow() })
  12. }, false)
  13. </script>

MacOS中应用菜单注意事项

MacOS中的应用程序有着和windows,linux完全不同风格的菜单样式。这里有一些说明,可以让你的程序菜单看起来更贴合原生系统。

标准菜单

MacOS有一些系统预定义的菜单,像是Services and Windows。 让你的菜单更像MacOS标准菜单,只需设置菜单role值为如下示之一,Electron便会自动认出并设置成标准菜单,:

  • window
  • help
  • services

标准菜单项操作

macOS 已经为某些菜单项提供了标准操作, 如 about xxx Hide xxx Hide Others 。 若要将菜单项的操作设置为标准操作, 应设置菜单项的 role 属性。

主菜单的名称

在 macOS 中应用程序菜单的第一个项目的标签总是你的应用程序的名字, 无论你设置什么标签。 如要更改它, 请修改应用程序包的 Info. plist 文件。 有关详细信息, 请参阅 About Information Property List Files

设置特定浏览器窗口的菜单 ( Linux Windows )

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

菜单项位置

你可以使用 before, after, beforeGroupContaining, afterGroupContainingid 来控制由 Menu.buildFromTemplate 生成的菜单项的位置.

  • before - 在指定的标签之前插入菜单项。 如果引用值不存在,那么该菜单项会插在这个菜单的尾部。 这还意味着,菜单项应该被放置在与引用项相同的组中。
  • after - 在指定的标签之后插入菜单项。 如果引用值不存在,那么该菜单项会插在这个菜单的尾部。 这还意味着,菜单项应该被放置在与引用项相同的组中。
  • 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.默认情况下,除非有位置相关的属性,所有的菜单项会按照模板中的顺序排放。

示例

模板:

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

菜单:

  1. <br />- 1
  2. - 2
  3. - 3
  4. - 4

模板:

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

菜单:

  1. <br />- 3
  2. - 4
  3. - ---
  4. - 1
  5. - ---
  6. - 2

模板:

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

菜单:

  1. <br />- ---
  2. - 3
  3. - 2
  4. - 1