Native menyer og kontekstmenyer
Implementer egendefinerte applikasjonsmenyer, kontekstmenyer og systemstatusfeltmenyer for å gi brukerne velkjent navigasjon og kjente alternativer.
Native menyer og kontekstmenyer er en gratis leksjon i Utvikling av Electron-skrivebordsapper på CoddyKit. Dette er leksjon 1 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Utvikling av Electron-skrivebordsapper, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Utvikling av Electron-skrivebordsapper inneholder totalt 4 leksjoner.
Opprinnelige menyer i Electron
Electron lar deg bygge skrivebordsapper ved hjelp av webteknologier. Men skrivebordsapper trenger også opprinnelige funksjoner, for eksempel menyer!
Opprinnelige menyer gir brukerne en velkjent opplevelse og passer sømløst inn i operativsystemet. Electron's Menu-modul lar deg opprette slike menyer.
- Programmenyer: Hovedmenylinjen (File, Edit, View).
- Kontekstmenyer: Menyer som vises ved høyreklikk og gjelder for et bestemt element.
- Systemstatusfeltmenyer: Menyer for ikoner i systemstatusfeltet eller dokken.
Bygge hovedmenylinjen
Programmenyen er hovedmenylinjen øverst i appvinduet (Windows/Linux) eller øverst på skjermen (macOS).
Den inneholder vanligvis standardalternativer som «File», «Edit», «View» og «Help». Disse menyene får appen til å føles opprinnelig og gir viktig navigasjon.
Du definerer strukturen ved hjelp av en JavaScript-matrise med objekter, kalt en menymal.
Kode: Grunnleggende programmeny
La oss opprette en minimal programmeny. Dette kodeutdraget skal legges i Electron-appens main.js-fil.
Det definerer en «File»-meny med et «Exit»-alternativ som avslutter appen. (Merk: nodeIntegration: true, contextIsolation: false brukes her for enkelhets skyld i eksemplene, men krever ofte sikrere konfigurasjoner i produksjonsapper.)
const { app, BrowserWindow, Menu } = require('electron');
let mainWindow;
function createWindow () {
mainWindow = new BrowserWindow({
width: 400,
height: 300,
webPreferences: {
nodeIntegration: true,
contextIsolation: false
}
});
mainWindow.loadFile('index.html'); // Ensure you have an index.html file
const template = [
{
label: 'File',
submenu: [
{
label: 'Exit',
accelerator: 'CmdOrCtrl+Q',
click() { app.quit(); }
}
]
}
];
const menu = Menu.buildFromTemplate(template);
Menu.setApplicationMenu(menu);
mainWindow.on('closed', () => { mainWindow = null; });
}
app.whenReady().then(createWindow);
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') app.quit();
});
app.on('activate', () => {
if (mainWindow === null) createWindow();
});Avanserte menyelementer og roller
Menyelementer kan ha spesielle roller som tilbyr standardfunksjonalitet (som «copy», «paste» og «quit») og sikrer plattformspesifikk oppførsel.
Du kan også opprette nestede menyer (undermenyer) for å organisere alternativene bedre. Tastatursnarveier kan legges til for rask tilgang.
role: 'quit': Avslutter appen.role: 'separator': Legger til en skillelinje.accelerator: 'CmdOrCtrl+Z': Definerer en tastatursnarvei.
Kode: Komplett programmeny
La oss forbedre programmenyen vår. Vi legger til en «Edit»-meny med standardroller og en «Help»-meny med et egendefinert element.
Legg merke til hvordan roller forenkler vanlige handlinger, og hvordan undermenyer holder hovedmenyen ryddig.
const { app, BrowserWindow, Menu } = require('electron');
let mainWindow;
function createWindow () {
mainWindow = new BrowserWindow({
width: 400,
height: 300,
webPreferences: {
nodeIntegration: true,
contextIsolation: false
}
});
mainWindow.loadFile('index.html');
const template = [
{
label: 'File',
submenu: [
{ label: 'New', accelerator: 'CmdOrCtrl+N' },
{ type: 'separator' },
{ label: 'Exit', role: 'quit' }
]
},
{
label: 'Edit',
submenu: [
{ label: 'Undo', role: 'undo' },
{ label: 'Redo', role: 'redo' },
{ type: 'separator' },
{ label: 'Cut', role: 'cut' },
{ label: 'Copy', role: 'copy' },
{ label: 'Paste', role: 'paste' }
]
},
{
label: 'Help',
submenu: [
{ label: 'About App', click() { console.log('About clicked!'); } }
]
}
];
const menu = Menu.buildFromTemplate(template);
Menu.setApplicationMenu(menu);
mainWindow.on('closed', () => { mainWindow = null; });
}
app.whenReady().then(createWindow);
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') app.quit();
});
app.on('activate', () => {
if (mainWindow === null) createWindow();
});Dynamiske kontekstmenyer
Kontekstmenyer er menyene som vises når du høyreklikker eller på annen måte samhandler med bestemte elementer eller områder i en applikasjon.
I motsetning til den statiske programmenyen er kontekstmenyer ofte dynamiske og endres ut fra hva du har klikket på. De bygges ved hjelp av den samme Menu-modulen.
De opprettes vanligvis i hovedprosessen og vises (sprette opp) fra renderer-prosessen via kommunikasjon mellom prosesser (IPC).
Kode: Opprette en kontekstmeny
Slik definerer De en enkel kontekstmeny. I dette eksempelet viser vi for enkelhets skyld hvordan den kan vises fra hovedprosessen etter en forsinkelse. I en virkelig app utløses den vanligvis av en høyreklikkhendelse i renderer-prosessen, som kommuniserer med hovedprosessen.
Metoden popup() viser menyen.
const { app, BrowserWindow, Menu } = require('electron');
let mainWindow;
function createWindow () {
mainWindow = new BrowserWindow({
width: 400,
height: 300,
webPreferences: {
nodeIntegration: true,
contextIsolation: false
}
});
mainWindow.loadFile('index.html');
const contextMenuTemplate = [
{ label: 'Inspect Element', click() { mainWindow.webContents.openDevTools(); } },
{ type: 'separator' },
{ label: 'Reload Page', role: 'reload' }
];
const contextMenu = Menu.buildFromTemplate(contextMenuTemplate);
// For demonstration: show context menu after a delay
setTimeout(() => {
contextMenu.popup({ window: mainWindow });
console.log('Context menu popped up!');
}, 3000);
mainWindow.on('closed', () => { mainWindow = null; });
}
app.whenReady().then(createWindow);
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') app.quit();
});
app.on('activate', () => {
if (mainWindow === null) createWindow();
});Menyer på systemstatusfeltet og i Dock
Et statusfeltikon (også kalt et statuslinjeikon på macOS eller et systemstatusfeltikon på Windows/Linux) gjør at applikasjonen kan kjøre i bakgrunnen og gi rask tilgang til vanlige handlinger.
Tray-modulen i Electron lar Dem opprette disse ikonene og knytte en statusfeltmeny til dem. Menyen vises når brukeren samhandler med ikonet (for eksempel ved høyreklikk).
Kode: Grunnleggende statusfeltmeny
Dette eksempelet viser hvordan De oppretter et enkelt statusfeltikon med en kontekstmeny. Husk å legge en liten ikonfil (for eksempel icon.png) i prosjektets rotmappe.
Statusfeltikonet vises i systemets varslingsområde eller i Dock. Når De klikker på statusfeltikonet, vises eller skjules hovedvinduet.
const { app, BrowserWindow, Menu, Tray } = require('electron');
const path = require('path');
let mainWindow;
let tray;
function createWindow () {
mainWindow = new BrowserWindow({
width: 400,
height: 300,
show: false, // Start hidden for tray app
webPreferences: {
nodeIntegration: true,
contextIsolation: false
}
});
mainWindow.loadFile('index.html');
mainWindow.on('closed', () => { mainWindow = null; });
}
app.whenReady().then(() => {
createWindow();
// Path to your icon file (e.g., in the same directory as main.js)
const iconPath = path.join(__dirname, 'icon.png');
tray = new Tray(iconPath);
const contextMenu = Menu.buildFromTemplate([
{ label: 'Open App', click: () => { mainWindow.show(); } },
{ label: 'Toggle DevTools', click: () => { mainWindow.webContents.toggleDevTools(); } },
{ type: 'separator' },
{ label: 'Quit', click: () => { app.quit(); } }
]);
tray.setToolTip('My Electron Tray App');
tray.setContextMenu(contextMenu);
tray.on('click', () => {
mainWindow.isVisible() ? mainWindow.hide() : mainWindow.show();
});
});
app.on('before-quit', () => {
// Clean up tray icon before quitting to prevent memory leaks
if (tray) tray.destroy();
});
app.on('activate', () => {
// On macOS it's common to re-create a window in the app when the dock icon is clicked
if (mainWindow === null) createWindow();
});
// For apps with tray icons, you might not want to quit when all windows are closed
// app.on('window-all-closed', () => {
// if (process.platform !== 'darwin') app.quit();
// });Sjekk av menytyper
De har lært om ulike typer innebygde menyer i Electron.
Hvilket av følgende utsagn om Electron-menyer er RIKTIG?
Menyer: Viktigste punkter
Godt jobbet! De har lært hvordan De integrerer innebygde menyer i Electron-applikasjonene Deres.
- Bruk
Menu-modulen til å opprette applikasjonsmenyer, kontekstmenyer og statusfeltmenyer. - Definer menystrukturer ved hjelp av menymaler (arrayer med objekter).
- Bruk menyelementroller for standardfunksjonalitet og samsvar på tvers av plattformer.
- Applikasjonsmenyer brukes på hovedvinduets menylinje, kontekstmenyer til dynamiske alternativer ved høyreklikk, og statusfeltmenyer til ikoner i systemstatusfeltet eller Dock.
- Bruk alltid
Menu.buildFromTemplate()ogMenu.setApplicationMenu()for hovedmenyen i appen.
Disse innebygde funksjonene gir en betydelig bedre brukeropplevelse i skrivebordsappen Deres!
Lær deg JavaScript med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 12
- Leksjoner
- 47
Ofte stilte spørsmål
Er leksjonen «Native menyer og kontekstmenyer» gratis?
Ja – hele teksten i «Native menyer og kontekstmenyer» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av Utvikling av Electron-skrivebordsapper-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Utvikling av Electron-skrivebordsapper inneholder totalt 4 leksjoner.
Hva lærer jeg i «Native menyer og kontekstmenyer»?
Implementer egendefinerte applikasjonsmenyer, kontekstmenyer og systemstatusfeltmenyer for å gi brukerne velkjent navigasjon og kjente alternativer. Du øver på Utvikling av Electron-skrivebordsapper med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med Utvikling av Electron-skrivebordsapper?
Ingen tidligere erfaring er nødvendig. Utvikling av Electron-skrivebordsapper på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 1 av 4.
Hvor lang tid tar leksjonen «Native menyer og kontekstmenyer»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne Utvikling av Electron-skrivebordsapper-leksjonen?
Ja. Alle Utvikling av Electron-skrivebordsapper-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Native menyer og kontekstmenyer
- Dialogbokser og varsler
- Integrasjon med skallet
- Globale hurtigtaster og tilgang til utklippstavlen