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

我想添加自定义菜单在mac中的菜单栏与电子(nodejs)
例如。 我们有
在这里输入图像描述

我想在Electron之后添加filter menu

       

网上收集的解决方案 "如何添加自定义菜单在菜单栏中的Mac与电子?"

这里有很多关于在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 )。 当你打包你的应用程序,那不会在那里。

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