Home-theater-designers
Electron vám umožňuje vytvářet desktopové aplikace pro Windows, Mac a Linux. Když vytváříte aplikaci pomocí Electronu, můžete si prohlédnout a spustit aplikaci prostřednictvím okna desktopové aplikace.
Electron můžete použít ke konfiguraci aplikace Angular tak, aby se spouštěla v okně plochy, místo obvyklého webového prohlížeče. Můžete to udělat pomocí souboru JavaScript v samotné aplikaci.
Jakmile nakonfigurujete Electron, můžete pokračovat ve vývoji jako u běžné aplikace Angular. Hlavní části aplikace budou mít stále stejnou standardní Angular strukturu.
Jak nainstalovat Electron jako součást vaší aplikace
Chcete-li používat Electron, musíte si stáhnout a nainstalovat node.js a pomocí npm install přidat Electron do své aplikace.
je windows 10 rychlejší než 7
- Stáhnout a nainstalovat node.js . Správnou instalaci můžete potvrdit kontrolou verze:
Node také zahrnuje npm, správce balíčků JavaScript . Můžete potvrdit, že máte nainstalovaný npm, zkontrolováním verze npm:node -vnpm -v - Vytvořte novou aplikaci Angular pomocí nového příkaz. Tím se vytvoří složka, která obsahuje vše potřebné soubory požadované pro projekt Angular do práce.
ng new electron-app - V kořenové složce vaší aplikace použijte npm k instalaci Electron.
npm install --save-dev electron - Tím se vytvoří nová složka pro Electron ve složce node_modules aplikace.
- Electron můžete také nainstalovat globálně na svůj počítač.
npm install -g electron
Souborová struktura aplikace Angular Electron
Electron bude vyžadovat hlavní soubor JavaScript pro vytvoření a správu okna plochy. V tomto okně se zobrazí obsah vaší aplikace. Soubor JavaScript bude obsahovat také další události, které mohou nastat, například když uživatel zavře okno.
potřebujete vždy získat co největší množství berana? proč nebo proč ne?
Za běhu bude zobrazený obsah pocházet ze souboru index.html. Ve výchozím nastavení najdete soubor index.html uvnitř src složky a za běhu se automaticky vytvoří její vestavěná kopie uvnitř dist složku.
Soubor index.html obvykle vypadá takto:
<!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> Uvnitř značky body je značka
Jak používat elektron k otevření úhlové aplikace v okně plochy
Vytvořte soubor main.js a nakonfigurujte jej tak, aby otevíral obsah aplikace v okně plochy.
- Vytvořte soubor v kořenovém adresáři projektu s názvem main.js . V tomto souboru inicializujte Electron, abyste jej mohli použít k vytvoření okna aplikace.
const { app, BrowserWindow } = require('electron'); - Vytvořte nové okno plochy určité šířky a výšky. Načtěte soubor indexu jako obsah, který se má zobrazit v okně. Ujistěte se, že cesta k indexovému souboru odpovídá názvu vaší aplikace. Pokud jste například aplikaci pojmenovali „electron-app“, cesta bude „dist/electron-app/index.html“.
function createWindow() {
win = new BrowserWindow({width: 800, height: 800});
win.loadFile('dist/electron-app/index.html');
} - Když je aplikace připravena, zavolejte funkci createWindow(). Tím se vytvoří okno aplikace pro vaši aplikaci.
app.whenReady().then(() => {
createWindow()
}) - V src/index.html souboru, v základna tag, změňte atribut href na './'.
<base href="./"> - v package.json , přidat hlavní pole a jako hodnotu zahrňte soubor main.js. Toto bude vstupní bod pro aplikaci, takže aplikace spustí soubor main.js při spouštění aplikace.
{
"name": "electron-app",
"version": "0.0.0",
"main" : "main.js",
....
} - V .browserslistrc soubor, upravte seznam a odeberte iOS safari verze 15.2-15.3. Tím zabráníte zobrazení chyb kompatibility v konzole při kompilaci.
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 - Odstraňte výchozí obsah v src/app/app.component.html soubor. Nahraďte jej nějakým novým obsahem.
<div class="content">
<div class="card">
<h2> Home </h2>
<p>
Welcome to my Angular Electron application!
</p>
</div>
</div> - Přidejte nějaký styl pro obsah v src/app/app.component.css soubor.
.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;
} - Přidejte trochu celkového stylu src/styles.css soubor k odstranění výchozích okrajů a odsazení.
html {
margin: 0;
padding: 0;
}
Jak spustit aplikaci Electron
Chcete-li spustit aplikaci v okně, nakonfigurujte příkaz v poli skriptů v souboru package.json. Poté spusťte aplikaci pomocí příkazu v terminálu.
- v package.json , do pole skriptů přidejte příkaz pro vytvoření aplikace Angular a spusťte Electron. Ujistěte se, že jste za předchozí záznam v poli skriptů přidali čárku.
"scripts": {
...
"electron": "ng build && electron ."
}, - Chcete-li spustit novou aplikaci Angular v okně plochy, spusťte na příkazovém řádku v kořenové složce projektu následující:
npm run electron - Počkejte, až se vaše aplikace zkompiluje. Po dokončení se místo toho, aby se aplikace Angular otevřela ve webovém prohlížeči, místo toho otevře okno na ploše. Na ploše se zobrazí obsah vaší aplikace Angular.
- Pokud chcete svou aplikaci stále zobrazovat ve webovém prohlížeči, můžete stále spustit příkaz ng serve.
ng serve - Pokud používáte sloužit se obsah vaší aplikace stále zobrazí ve webovém prohlížeči na adrese localhost: 4200.
Vytváření desktopových aplikací s elektronem
Electron můžete použít k vytváření desktopových aplikací na Windows, Mac a Linux. Ve výchozím nastavení můžete aplikaci Angular testovat pomocí webového prohlížeče pomocí příkazu ng serve. Aplikaci Angular můžete nakonfigurovat tak, aby se místo webového prohlížeče také otevírala v okně plochy.
jak uvolnit paměť Windows 7
Můžete to udělat pomocí souboru JavaScript. Budete také muset nakonfigurovat soubory index.html a package.json. Celková aplikace bude mít stále stejnou strukturu jako běžná aplikace Angular.
Pokud se chcete dozvědět více o tom, jak vytvářet desktopové aplikace, můžete také prozkoumat aplikace Windows Forms. Aplikace Windows Forms vám umožňují klikat a přetahovat prvky uživatelského rozhraní na plátno a zároveň přidávat jakoukoli logiku kódování do souborů C#.