Home-theater-designers
Electron låter dig bygga skrivbordsprogram för Windows, Mac och Linux. När du bygger en app med Electron kan du förhandsgranska och köra appen genom ett skrivbordsprogramfönster.
Du kan använda Electron för att konfigurera en Angular-app för att starta på ett skrivbordsfönster, istället för den vanliga webbläsaren. Du kan göra detta med hjälp av en JavaScript-fil i själva appen.
När du har konfigurerat Electron kan du fortsätta utvecklingen som du skulle göra med en vanlig Angular-app. Huvuddelarna av applikationen kommer fortfarande att följa samma standard Angular struktur.
Hur man installerar Electron som en del av din applikation
För att använda Electron måste du ladda ner och installera node.js och använda npm install för att lägga till Electron i din app.
- Ladda ner och installera node.js . Du kan bekräfta att du har installerat det korrekt genom att kontrollera versionen:
Node inkluderar också npm, JavaScript-pakethanteraren . Du kan bekräfta att du har npm installerat genom att kontrollera npm-versionen:node -vnpm -v - Skapa en ny Angular-applikation med hjälp av av ny kommando. Detta kommer att skapa en mapp som innehåller allt som behövs filer som krävs för ett Angular-projekt att arbeta.
ng new electron-app - I rotmappen för ditt program, använd npm för att installera Electron.
npm install --save-dev electron - Detta skapar en ny mapp för Electron i mappen node_modules i appen.
- Du kan också installera Electron globalt på din dator.
npm install -g electron
Filstrukturen för applikationen Angular Electron
Electron kommer att kräva en JavaScript-huvudfil för att skapa och hantera skrivbordsfönstret. Det här fönstret visar innehållet i din app i det. JavaScript-filen kommer också att innehålla andra händelser som kan inträffa, till exempel om användaren stänger fönstret.
Vid körning kommer innehållet som visas från filen index.html. Som standard kan du hitta filen index.html inuti src mapp, och vid körning skapas en byggd kopia av den automatiskt inuti dist mapp.
Filen index.html ser vanligtvis ut så här:
<!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> Inuti body-taggen finns en
Hur man använder elektron för att öppna en vinkelapplikation i ett skrivbordsfönster
Skapa filen main.js och konfigurera den för att öppna programmets innehåll i ett skrivbordsfönster.
- Skapa en fil i roten av ditt projekt med namnet main.js . Initiera Electron i den här filen så att du kan använda den för att skapa programfönstret.
const { app, BrowserWindow } = require('electron'); - Skapa ett nytt skrivbordsfönster med en viss bredd och höjd. Ladda indexfilen som innehåll som ska visas i fönstret. Se till att sökvägen till indexfilen matchar namnet på din app. Om du till exempel döpte din app till 'electron-app', kommer sökvägen att vara 'dist/electron-app/index.html'.
function createWindow() {
win = new BrowserWindow({width: 800, height: 800});
win.loadFile('dist/electron-app/index.html');
} - När appen är klar, anropa createWindow()-funktionen. Detta skapar programfönstret för din app.
app.whenReady().then(() => {
createWindow()
}) - I den src/index.html fil, i bas ändrar du href-attributet till './'.
<base href="./"> - I package.json , Lägg till en huvud och inkludera filen main.js som värdet. Detta kommer att vara startpunkten för appen, så att applikationen kör filen main.js när den startar appen.
{
"name": "electron-app",
"version": "0.0.0",
"main" : "main.js",
....
} - I den .browserslistrc fil, ändra listan för att ta bort iOS safari versionerna 15.2-15.3. Detta kommer att förhindra att kompatibilitetsfel visas i konsolen vid 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 - Ta bort standardinnehållet i src/app/app.component.html fil. Ersätt den med lite nytt innehåll.
<div class="content">
<div class="card">
<h2> Home </h2>
<p>
Welcome to my Angular Electron application!
</p>
</div>
</div> - Lägg till lite styling för innehållet 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;
} - Lägg till lite övergripande styling till src/styles.css fil för att ta bort standardmarginalerna och fyllningarna.
html {
margin: 0;
padding: 0;
}
Hur man kör en elektronapplikation
För att köra din applikation i ett fönster, konfigurera ett kommando i skriptarrayen för package.json. Kör sedan din app med kommandot i terminalen.
- I package.json , inuti skriptarrayen, lägg till ett kommando för att bygga Angular-appen och köra Electron. Se till att du lägger till ett kommatecken efter den föregående posten i skriptarrayen.
"scripts": {
...
"electron": "ng build && electron ."
}, - För att köra din nya Angular-applikation i ett skrivbordsfönster, kör följande på kommandoraden i ditt projekts rotmapp:
npm run electron - Vänta tills din ansökan kompileras. När det är klart, istället för att din Angular-app öppnas i webbläsaren, öppnas ett skrivbordsfönster istället. Skrivbordsfönstret visar innehållet i din Angular-app.
- Om du fortfarande vill se din applikation i webbläsaren kan du fortfarande köra kommandot ng serve.
ng serve - Om du använder av tjäna kommandot kommer innehållet i din app fortfarande att visas i en webbläsare på lokal värd: 4200.
Bygga skrivbordsapplikationer med elektron
Du kan använda Electron för att bygga skrivbordsprogram på Windows, Mac och Linux. Som standard kan du testa en Angular-applikation med en webbläsare via kommandot ng serve. Du kan konfigurera din Angular-applikation så att den också öppnas i ett skrivbordsfönster istället för en webbläsare.
Du kan göra detta med hjälp av en JavaScript-fil. Du måste också konfigurera filerna index.html och package.json. Den övergripande applikationen kommer fortfarande att följa samma struktur som en vanlig Angular-applikation.
hur man ändrar youtube profilbild
Om du vill lära dig mer om hur du bygger skrivbordsprogram kan du också utforska Windows Forms-appar. Windows Forms-appar låter dig klicka och dra UI-element till en duk samtidigt som du lägger till eventuell kodningslogik i C#-filer.