Home-theater-designers
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.
beste site om gratis muziek te downloaden
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 bevestigen dat 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:node -vnpm -v - Maak een nieuwe Angular-toepassing met behulp van de van nieuw opdracht. Hiermee wordt een map gemaakt die alle benodigde . bevat bestanden die nodig zijn voor een Angular-project aan het werk.
ng new electron-app - Gebruik in de hoofdmap van uw toepassing npm om Electron te installeren.
npm install --save-dev electron - 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 install -g electron
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.
Amazon-pakket zegt bezorgd maar was niet
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">
<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> Binnen de body-tag bevindt zich 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 } = require('electron'); - 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'.
function createWindow() {
win = new BrowserWindow({width: 800, height: 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 './'.
<base href="./"> - In pakket.json , Voeg een ... toe hoofd veld en neem het bestand main.js op als de waarde. Dit wordt het toegangspunt voor de app, zodat de toepassing het bestand main.js uitvoert terwijl de app wordt gestart.
{
"name": "electron-app",
"version": "0.0.0",
"main" : "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.
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 - Verwijder de standaardinhoud in de src/app/app.component.html het dossier. Vervang het door wat nieuwe inhoud.
<div class="content">
<div class="card">
<h2> Home </h2>
<p>
Welcome to my Angular Electron application!
</p>
</div>
</div> - Voeg wat styling toe voor de inhoud in de src/app/app.component.css bestand.
.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;
} - Voeg wat algemene styling toe aan de src/styles.css bestand om de standaardmarges en opvullingen te verwijderen.
html {
margin: 0;
padding: 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": {
...
"electron": "ng build && electron ."
}, - 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 electron - Wacht tot uw toepassing is gecompileerd. Eenmaal voltooid, wordt in plaats van dat uw Angular-app in de webbrowser wordt geopend, in plaats daarvan 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 serve - Als u de van 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.
waarom gebruikt chrome zoveel geheugen?
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.