Wie man benutzerdefinierte Menü in der Menüleiste in Mac mit Elektron hinzufügen?

Question

Ich möchte benutzerdefinierte Menü in der Menüleiste in Mac mit Elektron (Nodejs)
z. wir haben

und ich möchte filter menu direkt nach Electron hinzuzufügen.

Answer 1

Es gibt großartige Dokumentation zum Erstellen nativer benutzerdefinierter Anwendungsmenüs in API docs here. Es gibt viele Optionen und Fähigkeiten und Plattformunterschiede.

Zum Beispiel in der Hauptprozess Code, den Sie so etwas tun könnte:

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

, dass eine Anwendung Menüebene mit der Bezeichnung „Filter“ erstellen und, wenn sie geöffnet wird, die einzelnen Menüpunkt Anzeige der Aufschrift " Hallo". Klicken Sie darauf, um sich an der Konsole anzumelden.

Beachten Sie, dass wenn Sie electron-prebuilt verwenden, immer oben links "Electron" steht. Wenn du deine App als eigenständige Anwendung kompilierst (die nicht durch ein elektronisches Prebuilt-Programm läuft), hat sie dort deinen App-Namen.

Wie @neonhomer darauf hingewiesen hat, muss diese API nach dem Ready-Ereignis des App-Moduls aufgerufen werden.

Ich sollte auch hinzufügen, dass bei Verwendung von Electron in der Entwicklung, die Standard-Electron-App ein Standardmenü für Sie bereitstellen wird (siehe https://github.com/electron/electron/blob/d26e4a4abf9dfc277974c6c9678a24a5f9e4d104/default_app/main.js#L48). Wenn Sie Ihre App packen, ist das nicht möglich.

Answer 2

Es gibt eine kleine Notiz in der API-Dokumentation: http://electron.atom.io/docs/api/menu/#menusetapplicationmenumenu

Hinweis: Diese API hat nach dem Ereignis ready von App-Modul aufgerufen werden.

Interessant, dass es funktioniert direkt in Windows aufgerufen.

Hier ist ein vereinfachtes Beispiel:

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