Menu
类: Menu
创建原生应用程序菜单和上下文菜单。
进程: 主进程
new Menu()
创建一个新菜单。
静态方法
Menu 类具有以下静态方法
Menu.setApplicationMenu(menu)
menuMenu | null
在 macOS 上将 menu 设置为应用程序菜单。在 Windows 和 Linux 上，menu 将被设置为每个窗口的顶部菜单。
同样在 Windows 和 Linux 上，您可以在顶层项目名称中使用 & 来指示哪个字母应该获得生成的快捷键。例如，对文件菜单使用 &File 将会生成一个 Alt-F 快捷键，用于打开关联的菜单。按钮标签中指示的字符然后会带有下划线，并且 & 字符不会显示在按钮标签上。
为了转义项目名称中的 & 字符，请添加一个前导 &。例如，&&File 将会在按钮标签上显示为 &File。
传递 null 将会抑制默认菜单。在 Windows 和 Linux 上，这还会产生从窗口中移除菜单栏的额外效果。
注意： 如果应用程序未设置菜单，则会自动创建默认菜单。它包含诸如 File、Edit、View、Window 和 Help 等标准项目。
Menu.getApplicationMenu()
返回 Menu | null - 应用程序菜单（如果已设置），如果未设置则返回 null。
注意： 返回的 Menu 实例不支持动态添加或删除菜单项。 实例属性 仍然可以动态修改。
Menu.sendActionToFirstResponder(action) macOS
actionstring
将 action 发送到应用程序的第一响应者。这用于模拟默认的 macOS 菜单行为。通常您会使用 role 属性，它属于 MenuItem。
有关 macOS 原生操作的更多信息，请参阅 macOS Cocoa 事件处理指南。
Menu.buildFromTemplate(template)
template(MenuItemConstructorOptions | MenuItem)[]
返回 Menu
通常，template 是一个 options 数组，用于构造 MenuItem。用法可以参考上面。
您还可以将其他字段附加到 template 的元素，它们将成为构造的菜单项的属性。
实例方法
menu 对象具有以下实例方法
menu.popup([options])
将此菜单作为上下文菜单弹出在 BaseWindow 中。
menu.closePopup([window])
windowBaseWindow (可选) - 默认为焦点窗口。
关闭 window 中的上下文菜单。
menu.append(menuItem)
menuItemMenuItem
将 menuItem 附加到菜单。
menu.getMenuItemById(id)
idstring
返回 MenuItem | null 具有指定 id 的项目
menu.insert(pos, menuItem)
posIntegermenuItemMenuItem
将 menuItem 插入到菜单的 pos 位置。
实例事件
使用 new Menu 创建或由 Menu.buildFromTemplate 返回的对象会发出以下事件
注意： 某些事件仅在特定的操作系统上可用，并已标记。
事件: 'menu-will-show'
返回
eventEvent
当调用 menu.popup() 时发出。
事件: 'menu-will-close'
返回
eventEvent
当弹出窗口手动关闭或使用 menu.closePopup() 关闭时发出。
实例属性
menu 对象也具有以下属性
menu.items
一个 MenuItem[] 数组，包含菜单的项目。
每个 Menu 由多个 MenuItem 组成，并且每个 MenuItem 可以有一个子菜单。
示例
使用简单模板 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://electron.js.cn')
}
}
]
}
]
const menu = Menu.buildFromTemplate(template)
Menu.setApplicationMenu(menu)
渲染进程
要创建由渲染进程启动的菜单，请使用 IPC 将所需信息发送到主进程，并让主进程代表渲染器显示菜单。
以下是当用户右键单击页面时显示菜单的示例
// 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({ window: BrowserWindow.fromWebContents(event.sender) })
})
关于 macOS 应用程序菜单的注意事项
macOS 应用程序菜单的风格与 Windows 和 Linux 完全不同。以下是一些使您的应用程序菜单更像原生菜单的注意事项。
标准菜单
在 macOS 上，有许多系统定义的标准菜单，例如 Services 和 Windows 菜单。要使您的菜单成为标准菜单，您应该将菜单的 role 设置为以下之一，Electron 将会识别它们并使它们成为标准菜单
windowhelpservices
标准菜单项操作
macOS 为某些菜单项提供了标准操作，例如 About xxx、Hide xxx 和 Hide Others。要将菜单项的操作设置为标准操作，您应该设置菜单项的 role 属性。
主菜单的名称
在 macOS 上，应用程序菜单的第一个项目的标签始终是您的应用程序名称，无论您设置什么标签。要更改它，请修改您的应用程序捆绑包的 Info.plist 文件。有关更多信息，请参阅 关于信息属性列表文件。
为特定浏览器窗口设置菜单 (Linux Windows)
浏览器窗口的 setMenu 方法 可以设置特定浏览器窗口的菜单。
菜单项位置
您可以利用 before、after、beforeGroupContaining、afterGroupContaining 和 id 来控制在使用 Menu.buildFromTemplate 构建菜单时项目的放置方式。
before- 在具有指定 id 的项目之前插入此项目。如果引用的项目不存在，则该项目将插入到菜单的末尾。也意味着所讨论的菜单项应与该项目放在同一个“组”中。after- 在具有指定 id 的项目之后插入此项目。如果引用的项目不存在，则该项目将插入到菜单的末尾。也意味着所讨论的菜单项应与该项目放在同一个“组”中。beforeGroupContaining- 提供了一种方法，使单个上下文菜单可以在具有指定 id 的项目的包含组之前声明其包含组的位置。afterGroupContaining- 提供了一种方法，使单个上下文菜单可以在具有指定 id 的项目的包含组之后声明其包含组的位置。
默认情况下，除非使用指定的定位关键字之一，否则项目将按照它们在模板中存在的顺序插入。
示例
模板
[
{ id: '1', label: 'one' },
{ id: '2', label: 'two' },
{ id: '3', label: 'three' },
{ id: '4', label: 'four' }
]
Menu
- 1
- 2
- 3
- 4
模板
[
{ 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
模板
[
{ id: '1', label: 'one', after: ['3'] },
{ id: '2', label: 'two', before: ['1'] },
{ id: '3', label: 'three' }
]
Menu
- ---
- 3
- 2
- 1