Met Electron kunt u desktoptoepassingen bouwen voor Windows, Mac en Linux. Wanneer u een app bouwt met Electron, kunt u een voorbeeld van de app bekijken en uitvoeren via een bureaubladtoepassingsvenster.
U kunt Electron gebruiken om een Angular-app te configureren om op een bureaubladvenster te starten, in plaats van in de gebruikelijke webbrowser. U kunt dit doen met behulp van een JavaScript-bestand in de app zelf.
Nadat u Electron hebt geconfigureerd, kunt u doorgaan met ontwikkelen zoals u zou doen met een gewone Angular-app. De belangrijkste onderdelen van de applicatie zullen nog steeds dezelfde standaard Hoekstructuur volgen.
Electron installeren als onderdeel van uw toepassing
Om Electron te gebruiken, moet je node.js downloaden en installeren, en npm install gebruiken om Electron aan je app toe te voegen.
- Download en installeer node.js. U kunt controleren of u het correct hebt geïnstalleerd door de versie te controleren:
Knooppunt bevat ook npm, de JavaScript-pakketbeheerder. U kunt bevestigen dat npm is geïnstalleerd door de npm-versie te controleren:knoop -vnpm -v - Maak een nieuwe Angular-toepassing met behulp van de ng nieuw opdracht. Hiermee wordt een map gemaakt die alle benodigde. bevat bestanden die nodig zijn voor een Angular-project werken.
ng nieuwe electron-app - Gebruik in de hoofdmap van uw toepassing npm Electron installeren.
npm installeren--save-dev elektron - Hiermee wordt een nieuwe map voor Electron gemaakt in de map node_modules van de app.
- U kunt Electron ook wereldwijd op uw computer installeren.
npm installeren -g elektron
De bestandsstructuur van de Angular Electron-toepassing
Electron heeft een JavaScript-hoofdbestand nodig om het bureaubladvenster te maken en te beheren. In dit venster wordt de inhoud van uw app weergegeven. Het JavaScript-bestand bevat ook andere gebeurtenissen die kunnen optreden, bijvoorbeeld als de gebruiker het venster sluit.
Tijdens runtime komt de weergegeven inhoud uit het bestand index.html. Standaard vindt u het bestand index.html in de src map, en tijdens runtime wordt er automatisch een ingebouwde kopie van gemaakt in de dist map.
Het bestand index.html ziet er meestal als volgt uit:
<!doctype html>
<html lang="en">
<hoofd>
<meta-tekenset="utf-8">
<titel> ElectronApp </title>
<basis href="./">
<metanaam="uitkijk postje" inhoud="breedte = apparaatbreedte, initiële schaal = 1">
<link rel="icoon" type="afbeelding/x-icoon" href="favicon.ico">
</head>
<lichaam>
<app-root></app-root>
</body>
</html>In de body tag zit een
Electron gebruiken om een hoekapplicatie in een bureaubladvenster te openen
Maak het main.js-bestand en configureer het om de inhoud van de toepassing in een bureaubladvenster te openen.
- Maak een bestand in de hoofdmap van uw project met de naam main.js. In dit bestand initialiseert u Electron zodat u het kunt gebruiken om het toepassingsvenster te maken.
const { app, BrowserWindow } = vereisen('elektron'); - Maak een nieuw bureaubladvenster van een bepaalde breedte en hoogte. Laad het indexbestand als de inhoud om in het venster weer te geven. Zorg ervoor dat het pad naar het indexbestand overeenkomt met de naam van uw app. Als u uw app bijvoorbeeld "electron-app" hebt genoemd, is het pad "dist/electron-app/index.html".
functiecreërenVenster() {
winnen = nieuwe BrowserVenster({breedte: 800, hoogte: 800});
win.loadFile('dist/electron-app/index.html');
} - Als de app gereed is, roept u de functie createWindow() aan. Hiermee wordt het toepassingsvenster voor uw app gemaakt.
app.whenReady().then(() => {
createWindow()
}) - In de src/index.html bestand, in de baseren tag, verander het href-kenmerk in "./".
<basis href="./"> - In pakket.json, Voeg een... toe hoofd veld en neem het bestand main.js op als de waarde. Dit is het toegangspunt voor de app, zodat de toepassing het main.js-bestand uitvoert terwijl de app wordt gestart.
{
"naam": "electron-app",
"versie": "0.0.0",
"hoofd": "main.js",
...
} - In de .browserslistrc bestand, wijzig dan de lijst om iOS Safari-versies 15.2-15.3 te verwijderen. Dit voorkomt dat compatibiliteitsfouten in de console worden weergegeven tijdens het compileren.
laatste 1 Chrome-versie
laatste 1 Firefox-versie
laatste 2 hoofdversies van Edge
laatste 2 hoofdversies van Safari
laatste 2 belangrijke iOS-versies
Firefox ESR
nietios_saf 15.2-15.3
nietsafari 15.2-15.3 - Verwijder de standaardinhoud in de src/app/app.component.html het dossier. Vervang het door wat nieuwe inhoud.
<div klasse="inhoud">
<div klasse="kaart">
<h2> Huis </h2>
<p>
Welkom bij mijn Angular Electron-applicatie!
</p>
</div>
</div> - Voeg wat styling toe voor de inhoud in de src/app/app.component.css het dossier.
.inhoud {
lijnhoogte: 2rem;
lettertypegrootte: 1.2em;
marge: 48px 10%;
font-familie: Arial, sans-serif
}
.kaart {
doos-schaduw: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
breedte: 85%;
opvulling: 16px 48px;
marge: 24px 0px;
achtergrondkleur: witte rook;
font-familie: schreefloos;
} - Voeg wat algemene styling toe aan de src/styles.css bestand om de standaardmarges en opvullingen te verwijderen.
html {
marge: 0;
opvulling: 0;
}
Een Electron-toepassing uitvoeren
Om uw toepassing in een venster uit te voeren, configureert u een opdracht in de scriptreeks van package.json. Voer vervolgens uw app uit met behulp van de opdracht in de terminal.
- In pakket.json, voeg binnen de scripts-array een opdracht toe om de Angular-app te bouwen en Electron uit te voeren. Zorg ervoor dat u een komma toevoegt na het voorgaande item in de Scripts-array.
"scripts": {
...
"elektron": "ng bouwen && elektron."
}, - Om uw nieuwe Angular-toepassing in een bureaubladvenster uit te voeren, voert u het volgende uit in de opdrachtregel, in de hoofdmap van uw project:
npm run elektron - Wacht tot uw toepassing is gecompileerd. Eenmaal voltooid, wordt in plaats van dat uw Angular-app in de webbrowser wordt geopend, een bureaubladvenster geopend. Het bureaubladvenster toont de inhoud van uw Angular-app.
- Als u uw toepassing nog steeds in de webbrowser wilt bekijken, kunt u nog steeds de opdracht ng serve uitvoeren.
ng serveren - Als u de ng serveren commando, wordt de inhoud van uw app nog steeds weergegeven in een webbrowser op lokale host: 4200.
Desktop-applicaties bouwen met Electron
U kunt Electron gebruiken om desktoptoepassingen te bouwen op Windows, Mac en Linux. Standaard kunt u een Angular-toepassing testen met een webbrowser via de opdracht ng serve. U kunt uw Angular-toepassing zo configureren dat deze ook in een bureaubladvenster wordt geopend in plaats van in een webbrowser.
U kunt dit doen met behulp van een JavaScript-bestand. U moet ook uw index.html- en package.json-bestanden configureren. De algehele applicatie zal nog steeds dezelfde structuur volgen als een reguliere Angular-applicatie.
Als u meer wilt weten over het bouwen van desktoptoepassingen, kunt u ook Windows Forms-apps verkennen. Met Windows Forms-apps kunt u UI-elementen aanklikken en naar een canvas slepen, terwijl u ook codeerlogica aan C#-bestanden toevoegt.
