Menu
类: Menu
创建原生应用菜单和上下文菜单。
进程: 主进程
new Menu()
创建一个新的菜单。
静态方法
Menu 类有以下静态方法
Menu.setApplicationMenu(menu)
menuMenu | null
将 menu 设置为 macOS 上的应用菜单。在 Windows 和 Linux 上，menu 将被设置为每个窗口的顶部菜单。
此外，在 Windows 和 Linux 上，您可以在顶级菜单项名称中使用 & 来指示应生成加速器 (accelerator) 的字母。例如，对文件菜单使用 &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 发送到应用的第一个响应者 (first responder)。这用于模拟默认的 macOS 菜单行为。通常您会使用 role 属性的 MenuItem。
有关 macOS 原生行为的更多信息，请参阅 macOS Cocoa 事件处理指南。
Menu.buildFromTemplate(template)
template(MenuItemConstructorOptions | MenuItem)[]
返回 Menu
通常，template 是用于构建 MenuItem 的 options 数组。用法可参考上方。
您还可以将其他字段附加到 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 为某些菜单项提供了标准动作，例如 关于 xxx、隐藏 xxx 和 隐藏其他应用。要将菜单项的动作设置为标准动作，您应该设置该菜单项的 role 属性。
主菜单名称
在 macOS 上，应用菜单第一个项目的标签始终是您的应用名称，无论您设置什么标签。要更改它，请修改您的应用 bundle 的 Info.plist 文件。有关更多信息，请参阅 关于信息属性列表文件。
为特定浏览器窗口设置菜单 (Linux Windows)
浏览器窗口的 setMenu 方法 可以设置特定浏览器窗口的菜单。
菜单项位置
使用 Menu.buildFromTemplate 构建菜单时，您可以使用 before、after、beforeGroupContaining、afterGroupContaining 和 id 来控制项目的放置位置。
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