第4章 Electron 应用菜单构建指南

应用菜单 每个 Electron 应用都有一个顶层应用菜单。 在 macOS 上，该菜单显示在系统菜单栏中。 在 Windows 和 Linux 上，该菜单显示在每个 BaseWindow 的顶部。 构建应用菜单 通过向 Menu.setApplicationMenu 静态函数传入 Menu 实例来设置应用菜单。 在 Electron 中构建应用菜单时，每个顶层数组菜单项必须是子菜单。 如果从未调用此 API，Electron 会为应用设置默认菜单。下方展示了使用简写 MenuItem roles 手动创建该默认菜单的示例。 手动创建默认菜单const { shell } = require('electron/common')
const { app, Menu } = require('electron/main')

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://electronjs.org')
}
}
]
}
]

const menu = Menu.buildFromTemplate(template)
Menu.setApplicationMenu(menu)
info 在 macOS 上，应用菜单的第一个子菜单的标签始终是你的应用名称。一般来说，你可以通过有条件地添加一个带有 appMenu 角色的菜单项来填充这个子菜单。 tip 关于可用角色的更多说明，请参阅通用 Menus 指南中的 MenuItem roles 部分。 使用标准操作系统菜单角色​ 逐个显式定义每个子菜单会非常冗长。如果你想在应用中复用默认子菜单，可以使用 Electron 提供的各种与子菜单相关的角色。 为每个子菜单使用默认角色const { shell } = require('electron/common')
const { app, Menu } = require('electron/main')

const template = [
...(process.platform === 'darwin' ? [{ role: 'appMenu' }] : []),
{ role: 'fileMenu' },
{ role: 'editMenu' },
{ role: 'viewMenu' },
{ role: 'windowMenu' },
{
role: 'help',
submenu: [
{
label: 'Learn More',
click: async () => {
const { shell } = require('electron')
await shell.openExternal('https://electronjs.org')
}
}
]
}
]

const menu = Menu.buildFromTemplate(template)
Menu.setApplicationMenu(menu)
note 在 macOS 上，help 角色会定义一个顶级的 Help 子菜单，其中包含一个可用于搜索其他菜单项的搜索框。要使其正常工作，需要向其子菜单中添加菜单项。 设置窗口专属的应用菜单 Linux Windows​ 由于根应用菜单存在于 Windows 和 Linux 上的每个 BaseWindow 上，你可以通过 win.setMenu 方法用窗口专属的 Menu 实例覆盖它。 覆盖窗口菜单const { BrowserWindow, Menu } = require('electron/main')

const win = new BrowserWindow()
const menu = Menu.buildFromTemplate([
{
label: 'my custom menu',
submenu: [{ role: 'copy' }, { role: 'paste' }]
}
])
win.setMenu(menu)
提示：调用 win.removeMenu API 可移除特定窗口中的应用菜单。