Electron lader dig bygge desktop-applikationer til Windows, Mac og Linux. Når du bygger en app ved hjælp af Electron, kan du forhåndsvise og køre appen gennem et skrivebordsprogramvindue.
Du kan bruge Electron til at konfigurere en Angular-app til at starte på et skrivebordsvindue i stedet for den sædvanlige webbrowser. Du kan gøre dette ved at bruge en JavaScript-fil i selve appen.
Når du har konfigureret Electron, kan du fortsætte udviklingen, som du ville gøre på en almindelig Angular-app. Hoveddelene af applikationen vil stadig følge den samme standard vinkelstruktur.
Sådan installeres Electron som en del af din applikation
For at bruge Electron skal du downloade og installere node.js og bruge npm install til at tilføje Electron til din app.
- Download og installer node.js. Du kan bekræfte, at du har installeret det korrekt ved at kontrollere versionen:
Node inkluderer også npm, JavaScript-pakkemanageren. Du kan bekræfte, at du har npm installeret ved at kontrollere npm-versionen:node -vnpm -v - Opret en ny Angular-applikation ved hjælp af ng nyt kommando. Dette vil oprette en mappe, der indeholder alt det nødvendige filer, der kræves til et Angular-projekt at arbejde.
ng ny elektron-app - I rodmappen i dit program skal du bruge npm at installere Electron.
npm installere--save-dev elektron - Dette vil oprette en ny mappe til Electron i mappen node_modules i appen.
- Du kan også installere Electron globalt på din computer.
npm installere -g elektron
Filstrukturen af vinkelelektronapplikationen
Electron kræver en primær JavaScript-fil for at oprette og administrere skrivebordsvinduet. Dette vindue viser indholdet af din app i det. JavaScript-filen vil også indeholde andre hændelser, der kan forekomme, såsom hvis brugeren lukker vinduet.
Ved kørsel vil det viste indhold komme fra filen index.html. Som standard kan du finde filen index.html inde i src mappe, og ved kørsel oprettes der automatisk en indbygget kopi af den inde i dist folder.
index.html-filen ser normalt sådan ud:
<!doctype html>
<html lang="da">
<hoved>
<meta tegnsæt="utf-8">
<titel> ElectronApp </title>
<base href="./">
<metanavn="viewport" indhold="width=enhedsbredde, initial-skala=1">
<link rel="ikon" type="billede/x-ikon" href="favicon.ico">
</head>
<legeme>
<app-root></app-root>
</body>
</html>Inde i kropsmærket er en
Sådan bruges elektron til at åbne en vinkelapplikation i et skrivebordsvindue
Opret filen main.js, og konfigurer den til at åbne programmets indhold i et skrivebordsvindue.
- Opret en fil i roden af dit projekt med navnet main.js. I denne fil skal du initialisere Electron, så du kan bruge det til at oprette programvinduet.
konst { app, BrowserWindow } = kræve('elektron'); - Opret et nyt skrivebordsvindue med en bestemt bredde og højde. Indlæs indeksfilen som det indhold, der skal vises i vinduet. Sørg for, at stien til indeksfilen matcher navnet på din app. For eksempel, hvis du navngav din app "electron-app", vil stien være "dist/electron-app/index.html".
fungereoprette vindue() {
vinde = ny BrowserWindow({bredde: 800, højde: 800});
win.loadFile('dist/electron-app/index.html');
} - Når appen er klar, skal du kalde funktionen createWindow(). Dette vil oprette applikationsvinduet for din app.
app.whenReady().then(() => {
createWindow()
}) - I den src/index.html fil, i grundlag tag, skal du ændre href-attributten til "./".
<base href="./"> - I package.json, Tilføj en vigtigste felt, og inkluder filen main.js som værdien. Dette vil være indgangspunktet for appen, så applikationen kører main.js-filen, når den starter appen.
{
"navn": "elektron-app",
"version": "0.0.0",
"vigtigste": "main.js",
...
} - I den .browserslistrc fil, skal du ændre listen for at fjerne iOS safari version 15.2-15.3. Dette forhindrer kompatibilitetsfejl i at blive vist i konsollen under kompilering.
sidste 1 Chrome-version
sidste 1 Firefox-version
sidste 2 Edge større versioner
sidste 2 Safari store versioner
sidste 2 iOS større versioner
Firefox ESR
ikkeios_saf 15.2-15.3
ikkesafari 15.2-15.3 - Slet standardindholdet i src/app/app.component.html fil. Erstat det med noget nyt indhold.
<div klasse="indhold">
<div klasse="kort">
<h2> Hjem </h2>
<s>
Velkommen til min Angular Electron-applikation!
</s>
</div>
</div> - Tilføj lidt styling til indholdet i src/app/app.component.css fil.
.indhold {
line-højde: 2rem;
skriftstørrelse: 1.2em;
margin: 48px 10%;
font-familie: Arial, sans-serif
}
.kort {
kasse-skygge: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
bredde: 85%;
polstring: 16px 48px;
margen: 24px 0px;
baggrundsfarve: hvid røg;
font-familie: sans-serif;
} - Tilføj noget overordnet styling til src/styles.css fil for at fjerne standardmargener og fyld.
html {
margin: 0;
polstring: 0;
}
Sådan kører du en elektronapplikation
For at køre dit program i et vindue skal du konfigurere en kommando i script-arrayet i package.json. Kør derefter din app ved hjælp af kommandoen i terminalen.
- I package.json, inde i scriptarrayet, tilføj en kommando for at bygge Angular-appen og køre Electron. Sørg for at tilføje et komma efter den foregående indtastning i Scripts-arrayet.
"scripts": {
...
"elektron": "ng bygge && elektron."
}, - For at køre dit nye Angular-program i et skrivebordsvindue skal du køre følgende på kommandolinjen i dit projekts rodmapp:
npm køre elektron - Vent på, at din ansøgning kompileres. Når det er afsluttet, åbnes et skrivebordsvindue i stedet for at din Angular-app åbnes i webbrowseren. Skrivebordsvinduet viser indholdet af din Angular-app.
- Hvis du stadig vil se din applikation i webbrowseren, kan du stadig køre kommandoen ng serve.
ng tjene - Hvis du bruger ng tjene kommando, vil indholdet af din app stadig blive vist i en webbrowser kl lokalvært: 4200.
Opbygning af desktop-applikationer med elektron
Du kan bruge Electron til at bygge desktop-applikationer på Windows, Mac og Linux. Som standard kan du teste en Angular-applikation ved hjælp af en webbrowser via kommandoen ng serve. Du kan konfigurere din Angular-applikation til også at åbne i et skrivebordsvindue i stedet for en webbrowser.
Du kan gøre dette ved hjælp af en JavaScript-fil. Du skal også konfigurere dine index.html og package.json filer. Den overordnede applikation vil stadig følge samme struktur som en almindelig Angular applikation.
Hvis du vil lære mere om, hvordan du bygger desktop-applikationer, kan du også udforske Windows Forms-apps. Windows Forms-apps giver dig mulighed for at klikke og trække UI-elementer til et lærred, mens du også tilføjer enhver kodningslogik til C#-filer.
