Home-theater-designers
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.
hvordan man slutter bluetooth -hovedtelefoner til xbox
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 elektron 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 tjekke versionen:
Node inkluderer også npm, JavaScript-pakkeadministratoren . Du kan bekræfte, at du har npm installeret ved at tjekke npm-versionen:node -vnpm -v - Opret en ny Angular-applikation ved hjælp af af nye kommando. Dette vil oprette en mappe, der indeholder alt det nødvendige filer, der kræves til et Angular-projekt at arbejde.
ng new electron-app - I rodmappen i dit program skal du bruge npm for at installere Electron.
npm install --save-dev electron - Dette vil oprette en ny mappe til Electron i mappen node_modules i appen.
- Du kan også installere Electron globalt på din computer.
npm install -g electron
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="en">
<head>
<meta charset="utf-8">
<title> ElectronApp </title>
<base href="./">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root> </app-root>
</body>
</html> Inde i body-tagget er et
kan jeg annullere en venmo -betaling
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.
const { app, BrowserWindow } = require('electron'); - 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'.
function createWindow() {
win = new BrowserWindow({width: 800, height: 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.
{
"name": "electron-app",
"version": "0.0.0",
"main" : "main.js",
....
} - I den .browserslistrc fil, skal du ændre listen for at fjerne iOS safari version 15.2-15.3. Dette vil forhindre kompatibilitetsfejl i at blive vist i konsollen under kompilering.
last 1 Chrome version
last 1 Firefox version
last 2 Edge major versions
last 2 Safari major versions
last 2 iOS major versions
Firefox ESR
not ios_saf 15.2-15.3
not safari 15.2-15.3 - Slet standardindholdet i src/app/app.component.html fil. Udskift det med noget nyt indhold.
<div class="content">
<div class="card">
<h2> Home </h2>
<p>
Welcome to my Angular Electron application!
</p>
</div>
</div> - Tilføj lidt styling til indholdet i src/app/app.component.css fil.
.content {
line-height: 2rem;
font-size: 1.2em;
margin: 48px 10%;
font-family: Arial, sans-serif
}
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
width: 85%;
padding: 16px 48px;
margin: 24px 0px;
background-color: whitesmoke;
font-family: sans-serif;
} - Tilføj noget overordnet styling til src/styles.css fil for at fjerne standardmargener og fyld.
html {
margin: 0;
padding: 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": {
...
"electron": "ng build && electron ."
}, - For at køre dit nye Angular-program i et skrivebordsvindue skal du køre følgende på kommandolinjen i dit projekts rodmapp:
npm run electron - 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 serve - Hvis du bruger af 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.