如何添加自定义菜单在菜单栏中的Mac与电子？

我想添加自定义菜单在mac中的菜单栏与电子（nodejs）
例如。 我们有

我想在Electron之后添加filter menu 。

Answer 1

这里有很多关于在API文档中构build原生的自定义应用程序菜单的文档 。 有很多select和function和平台差异。

例如，在您的主要stream程代码中，您可以执行如下操作：

 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)); } 

这将创build一个标签为“Filter”的应用程序级菜单，打开时将显示标签为“Hello”的单个菜单项。 点击它login到控制台。

请注意，当您使用electron-prebuilt ，它总是在左上angular说“电子”。 当您将应用程序编译为独立应用程序（而不是通过电子预编译运行）时，它将在那里有您的应用程序名称。

正如@neonhomer所指出的，这个API必须在app模块的ready事件之后被调用。

我还要补充一点，在开发中使用Electron时，默认的Electron应用程序将为您提供默认菜单（请参阅https://github.com/electron/electron/blob/d26e4a4abf9dfc277974c6c9678a24a5f9e4d104/default_app/main.js#L48 ）。 当你打包你的应用程序，那不会在那里。

Answer 2

API文档中有一个小logging： http : //electron.atom.io/docs/api/menu/#menusetapplicationmenumenu

注意 ：这个API必须在app模块的ready事件之后被调用。

有趣的是，它直接在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() } })