Deres første Electron-applikation
Følg en trinvis vejledning til at oprette en grundlæggende 'Hello World'-Electron-applikation, herunder det grundlæggende i main- og renderer-processerne.
Deres første Electron-applikation er en gratis Udvikling af desktopapps med Electron-lektion på CoddyKit. Dette er lektion 3 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Udvikling af desktopapps med Electron, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Udvikling af desktopapps med Electron-kurset indeholder 4 lektioner i alt.
Hej, Electron-verden!
Nu skal du bygge din første Electron-app — en enkel desktopudgave af "Hello World". Den introducerer de centrale filer, som bringer webteknologi til skrivebordet.
Opsætning af dit projekt
Først opretter du projektets grundstruktur: Opret en mappe, kør npm init, og installér derefter Electron som en udviklingsafhængighed. Kommandoerne står nedenfor.
Hovedprocessen (main.js)
Alle apps har en hovedproces — et Node.js-miljø, der styrer livscyklussen, kommunikerer med operativsystemet og opretter vinduer. Den starter i main.js.
main.js: Grundlæggende vinduesopsætning
I main.js importerer du Electron-moduler og definerer, hvordan der oprettes et vindue, som skal indeholde dit webindhold. Prøv den grundlæggende opsætning nedenfor.
const { app, BrowserWindow } = require('electron');
const path = require('path');
function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
contextIsolation: false
}
});
// We'll load our HTML file here soon!
}
app.whenReady().then(createWindow);
// Handle closing all windows for non-macOS
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
// Handle re-activating app on macOS
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});Rendererprocessen (index.html)
Rendererprocessen er der, hvor din brugergrænseflade findes — grundlæggende et Chromium-vindue, der renderer HTML, CSS og JS. Den indlæser indhold fra index.html.
index.html: Vores brugergrænseflade
Denne index.html-fil indeholder din Hello World-besked — bare en almindelig webside, præcis som enhver anden, du ville bygge til browseren.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello Electron App</title>
<style>
body { font-family: sans-serif; text-align: center; padding: 50px; background-color: #f0f0f0; }
h1 { color: #333; }
p { color: #666; }
</style>
</head>
<body>
<h1>Hello from Electron!</h1>
<p>This is your very first desktop application.</p>
</body>
</html>Forbind hovedprocessen og rendererprocessen
Forbind nu de to: Fortæl vinduet, at det skal vise din side, med win.loadFile() inde i createWindow. Én linje forbinder brugergrænsefladen med hovedprocessen.
main.js: Indlæsning af HTML
Her er main.js opdateret, så siden indlæses. Bemærk, hvordan __dirname finder index.html relativt til scriptet, uanset hvor det kører.
const { app, BrowserWindow } = require('electron');
const path = require('path');
function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
contextIsolation: false
}
});
win.loadFile(path.join(__dirname, 'index.html')); // Load the HTML file
}
app.whenReady().then(createWindow);
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});Kør din Electron-app
Tilføj et startscript i package.json, så du kan starte appen med én kommando i stedet for at skrive electron hver gang.
package.json: Startscript
Din package.json bør se sådan ud. "electron ." kører main.js i den aktuelle mappe — gem filen, og kør derefter "npm start" for at starte appen.
{
"name": "my-electron-app",
"version": "1.0.0",
"description": "My first Electron app",
"main": "main.js",
"scripts": {
"start": "electron ."
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"electron": "^28.0.0"
}
}Hurtig kontrol: Hovedprocessens rolle
Du har set, hvordan main.js og index.html fungerer sammen. Lad os teste, om du har forstået deres primære roller.
Opsummering: Din første Electron-app
Du har bygget din første Electron-app: en hovedproces til livscyklus og vinduer, en rendererproces til brugergrænsefladen og et startscript, der forbinder dem.
Lær JavaScript med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 12
- Lektioner
- 47
Ofte stillede spørgsmål
Er lektionen “Deres første Electron-applikation” gratis?
Ja — hele teksten til “Deres første Electron-applikation” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Udvikling af desktopapps med Electron-kurset, skal du opgradere til CoddyKit PRO. Udvikling af desktopapps med Electron-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Deres første Electron-applikation”?
Følg en trinvis vejledning til at oprette en grundlæggende 'Hello World'-Electron-applikation, herunder det grundlæggende i main- og renderer-processerne. Du øver dig i Udvikling af desktopapps med Electron med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på Udvikling af desktopapps med Electron?
Der kræves ingen tidligere erfaring. Udvikling af desktopapps med Electron på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 3 af 4.
Hvor lang tid tager lektionen “Deres første Electron-applikation”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne Udvikling af desktopapps med Electron-lektion?
Ja. Alle Udvikling af desktopapps med Electron-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Hvad er Electron?
- Opsætning af udviklingsmiljøet
- Deres første Electron-applikation
- Forstå Electrons arkitektur