如何在電子菜單的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() 
    } 
})