![](/img/trans.png)
[英]How to add an icon to the right hand side of the MacOS menu bar in Electron?
[英]How to add custom menu in menubar in mac with electron?
这里有关于在API文档中构建本机,自定义应用程序菜单的精彩文档。 有很多选项和功能以及平台差异。
例如,在主进程代码中,您可以执行以下操作:
const { app, BrowserWindow, Menu } = require('electron');
const path = require('path');
let mainWindow;
app.on('ready', () => {
mainWindow = new BrowserWindow();
mainWindow.loadURL(path.join('file://', __dirname, 'index.html'));
setMainMenu();
});
function setMainMenu() {
const template = [
{
label: 'Filter',
submenu: [
{
label: 'Hello',
accelerator: 'Shift+CmdOrCtrl+H',
click() {
console.log('Oh, hi there!')
}
}
]
}
];
Menu.setApplicationMenu(Menu.buildFromTemplate(template));
}
这将创建一个带有标签“Filter”的应用程序级菜单,打开时将显示标有“Hello”的单个菜单项。 单击它会记录到控制台。
请注意,当您使用electron-prebuilt
,它始终在左上角显示“电子”。 当您将应用程序编译为独立应用程序(不通过电子预建立运行)时,它将具有您的应用程序名称。
正如@neonhomer指出的那样,必须在app模块的ready事件之后调用此API。
我还应该补充一点,在开发中使用Electron时,默认的Electron应用程序将为您提供默认菜单(请参阅https://github.com/electron/electron/blob/d26e4a4abf9dfc277974c6c9678a24a5f9e4d104/default_app/main.js#L48 )。 当您打包应用程序时,那将不存在。
API文档中有一个小注释: http : //electron.atom.io/docs/api/menu/#menusetapplicationmenumenu
注意 :必须在app模块的ready事件之后调用此API。
有趣的是它可以在Windows中直接调用。
这是一个简化的例子:
const {app, BrowserWindow, Menu} = require('electron')
const menuTemplate = [...]
const menu = Menu.buildFromTemplate(menuTemplate)
let win
function createWindow() {
win = new BrowserWindow({ width: 800, height: 600, })
win.loadURL(`file://${__dirname}/index.html`)
win.on('closed', () => {
win = null
})
}
app.on('ready', () => {
Menu.setApplicationMenu(menu)
createWindow()
})
app.on('window-all-closed', () => {
app.quit();
})
app.on('activate', () => {
if (win === null) {
createWindow()
}
})
2019更新:可以使用此组件: https : //www.npmjs.com/package/custom-electron-titlebar
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.