如何在电子菜单的mac菜单中添加自定义菜单？

Question

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

，我想Electron之后添加filter menu。

Answer 1

关于在API docs here中构建原生自定义应用程序菜单的文档很多。有很多选项和功能以及平台差异。

例如，在你的主进程的代码，你可以做这样的事情：

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

这将创建一个标签“过滤器”的应用程序级菜单，打开会显示标示为单个菜单项时“你好”。点击它登录到控制台。

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

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

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

Answer 2

有API文档在一张小纸条： http://electron.atom.io/docs/api/menu/#menusetapplicationmenumenu

注意：此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() 
    } 
})