菜单
Electron 的 Menu 类提供了一种标准化方法，可在您的应用程序中创建跨平台的原生菜单。
Electron 中可用的菜单
相同的菜单 API 用于多种用例
- 应用程序菜单是您应用程序的顶级菜单。每个应用程序一次只有一个应用程序菜单。
- 上下文菜单在用户右键单击您应用程序界面的一部分时触发。
- 托盘菜单是一种特殊的上下文菜单，在右键单击您应用程序的 Tray 实例时触发。
- 在 macOS 上，Dock 菜单是一种特殊的上下文菜单，在右键单击您应用程序在系统 Dock 中的图标时触发。
要了解有关您可以创建的各种原生菜单以及如何指定键盘快捷键的更多信息，请参阅本节中的各个指南
📄️ 应用程序菜单
自定义 Electron 应用的主应用程序菜单
📄️ 上下文菜单
使用 Menu API 配置跨平台原生操作系统菜单。
📄️ Dock 菜单
配置您应用在 macOS 上的 Dock 外观。
📄️ 托盘菜单
创建带有关联菜单的系统通知区域托盘图标。
📄️ 键盘快捷键
为本地和全局键盘快捷键定义快捷键字符串
构建菜单
每个 Menu 实例由一个 MenuItem 对象数组组成，可以通过 menu.items 实例属性访问。通过将 item.submenu 属性设置为另一个菜单，可以嵌套菜单。
构建菜单有两种方法：直接调用 menu.append 或使用静态 Menu.buildFromTemplate 辅助函数。
该辅助函数通过允许您在单个数组中传递 MenuItem 构造函数选项（或已实例化的 MenuItem 实例）的集合，而不是必须在单独的函数调用中追加每个项，从而减少了样板代码。
下面是一个最小化的应用程序菜单示例
- 构造函数
- 模板助手
const submenu = new Menu()
submenu.append(new MenuItem({ label: 'Hello' }))
submenu.append(new MenuItem({ type: 'separator' }))
submenu.append(new MenuItem({ label: 'Electron', type: 'checkbox', checked: true }))
const menu = new Menu()
menu.append(new MenuItem({ label: 'Menu', submenu }))
Menu.setApplicationMenu(menu)
const menu = Menu.buildFromTemplate([{
label: 'Menu',
submenu: [
{ label: 'Hello' },
{ type: 'separator' },
{ label: 'Electron', type: 'checkbox', checked: true }
]
}])
Menu.setApplicationMenu(menu)
所有菜单项（除了 separator 类型）都必须有一个标签。标签可以通过 label 属性手动定义，或者从项的 role 继承。
类型
菜单项的类型决定了其外观和功能。有些类型是根据其他构造函数选项自动分配的。
- 默认情况下，菜单项的类型为
normal。 - 包含
submenu属性的菜单项将被分配submenu类型。
其他可用类型，当指定时，会为菜单项提供特殊的附加属性
checkbox- 点击菜单项时切换checked属性radio- 点击时切换checked属性，并关闭相邻所有radio项的该属性palette- 创建一个 调色板 子菜单，水平对齐项（macOS 14 及以上版本可用）header- 创建一个章节标题，用于传达分组信息（macOS 14 及以上版本可用）
相邻的 radio 项位于同一子菜单级别，并且不被分隔符分隔。
[
{ type: 'radio', label: 'Adjacent 1' },
{ type: 'radio', label: 'Adjacent 2' },
{ type: 'separator' },
{ type: 'radio', label: 'Non-adjacent' } // unaffected by the others
]
角色
角色为 normal 类型菜单项提供预定义的行为。
我们建议为任何匹配标准角色的菜单项指定 role 属性，而不是尝试在 click 函数中手动实现行为。内置的 role 行为将提供最佳的原生体验。
使用 role 时，label 和 accelerator 值是可选的，它们将根据每个平台自动设置为适当的值。
角色字符串是不区分大小写的。例如，在定义菜单项时，toggleDevTools、toggledevtools 和 TOGGLEDEVTOOLS 都是等效的角色。
编辑角色
undoredocutcopypastepasteAndMatchStyleselectAlldelete
窗口角色
about- 触发原生关于面板（在 Windows 上为自定义消息框，因为它不提供自己的）。minimize- 最小化当前窗口。close- 关闭当前窗口。quit- 退出应用程序。reload- 重新加载当前窗口。forceReload- 强制重新加载当前窗口（忽略缓存）。toggleDevTools- 切换当前窗口的开发者工具。togglefullscreen- 切换当前窗口的全屏模式。resetZoom- 将焦点页面的缩放级别重置为原始大小。zoomIn- 将焦点页面放大 10%。zoomOut- 将焦点页面缩小 10%。toggleSpellChecker- 启用/禁用内置拼写检查器。
默认菜单角色
fileMenu- 子菜单是“文件”菜单（关闭 / 退出）editMenu- 子菜单是“编辑”菜单（撤销、复制等）viewMenu- 子菜单是“视图”菜单（重新加载、切换开发者工具等）windowMenu- 子菜单是“窗口”菜单（最小化、缩放等）
仅限 macOS 的角色
macOS 有许多平台特定的菜单角色可用。其中许多映射到底层的 AppKit API。
应用管理角色
hide- 映射到hide操作。hideOthers- 映射到hideOtherApplications操作。unhide- 映射到unhideAllApplications操作。front- 映射到arrangeInFront操作。zoom- 映射到performZoom操作。
编辑角色
showSubstitutions- 映射到orderFrontSubstitutionsPanel操作。toggleSmartQuotes- 映射到toggleAutomaticQuoteSubstitution操作。toggleSmartDashes- 映射到toggleAutomaticDashSubstitution操作。toggleTextReplacement- 映射到toggleAutomaticTextReplacement操作。
语音角色
startSpeaking- 映射到startSpeaking操作。stopSpeaking- 映射到stopSpeaking操作。
原生标签页角色
toggleTabBar- 映射到toggleTabBar操作。selectNextTab- 映射到selectNextTab操作。selectPreviousTab- 映射到selectPreviousTab操作。
mergeAllWindows- 映射到mergeAllWindows操作。moveTabToNewWindow- 映射到moveTabToNewWindow操作。
默认菜单角色
appMenu- 整个默认的“应用”菜单（关于、服务等）services- 子菜单是“服务”菜单。window- 子菜单是“窗口”菜单。help- 子菜单是“帮助”菜单。
其他菜单角色
recentDocuments- 子菜单是“打开最近使用的文档”菜单。clearRecentDocuments- 映射到clearRecentDocuments操作。shareMenu- 子菜单是 [共享菜单][ShareMenu]。还必须设置sharingItem属性来指定要共享的项。
在 macOS 上指定 role 时，只有 label 和 accelerator 选项会影响菜单项。所有其他选项都将被忽略。
快捷键
accelerator 属性允许您定义快捷键字符串，将菜单项映射到键盘快捷键。有关更多详细信息，请参阅 Keyboard Shortcuts 指南。
高级配置
编程项定位
您可以使用 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
- one
- two
- three
- four
模板
[
{ 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
- three
- four
- ---
- one
- ---
- two
模板
[
{ id: '1', label: 'one', after: ['3'] },
{ id: '2', label: 'two', before: ['1'] },
{ id: '3', label: 'three' }
]
Menu
- ---
- three
- two
- one
图标
为了给您的菜单添加视觉辅助，您可以使用 icon 属性为单个 MenuItem 实例分配图像。
const { nativeImage } = require('electron/common')
const { MenuItem } = require('electron/main')
const green = nativeImage.createFromDataURL('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACOSURBVHgBpZLRDYAgEEOrEzgCozCCGzkCbKArOIlugJvgoRAUNcLRpvGH19TkgFQWkqIohhK8UEaKwKcsOg/+WR1vX+AlA74u6q4FqgCOSzwsGHCwbKliAF89Cv89tWmOT4VaVMoVbOBrdQUz+FrD6XItzh4LzYB1HFJ9yrEkZ4l+wvcid9pTssh4UKbPd+4vED2Nd54iAAAAAElFTkSuQmCC')
const item = new MenuItem({
label: 'Green Circle',
icon: green
})
副标题 macOS
在 macOS 14.4 及以上版本中，您可以使用 sublabel 选项为菜单项添加副标题（也称为 副标题）。
const { MenuItem } = require('electron/main')
const item = new MenuItem({
label: 'Log Message',
sublabel: 'This will use the console.log utility',
click: () => { console.log('Logging via menu...') }
})
工具提示 macOS
工具提示是当您将鼠标悬停在菜单项上时出现的提示性信息。您可以使用 toolTip 选项在 macOS 上设置菜单项的工具提示。
const { MenuItem } = require('electron/main')
const item = new MenuItem({
label: 'Hover Over Me',
toolTip: 'This is additional info that appears on hover'
})