Az Electron segítségével asztali alkalmazásokat készíthet Windows, Mac és Linux rendszerre. Amikor az Electron használatával készít egy alkalmazást, megtekintheti és futtathatja az alkalmazást az asztali alkalmazás ablakában.

Az Electron segítségével beállíthat egy Angular alkalmazást úgy, hogy az asztali ablakban induljon el a szokásos webböngésző helyett. Ezt az alkalmazáson belüli JavaScript-fájl segítségével teheti meg.

Az Electron konfigurálása után folytathatja a fejlesztést, mint egy hagyományos Angular alkalmazásban. Az alkalmazás fő részei továbbra is ugyanazt a szabványos szögszerkezetet fogják követni.

Az Electron telepítése az alkalmazás részeként

Az Electron használatához le kell töltenie és telepítenie kell a node.js fájlt, majd az npm install segítségével hozzáadhatja az Electront az alkalmazáshoz.

  1. Letöltés és telepítés node.js. A verzió ellenőrzésével ellenőrizheti, hogy megfelelően telepítette-e:
    csomópont -v
    Node is tartalmazza npm, a JavaScript csomagkezelő. Az npm verziójának ellenőrzésével ellenőrizheti, hogy az npm telepítve van-e:
    npm -v
    2. instagram viewer
  2. Hozzon létre egy új Angular alkalmazást a új parancs. Ezzel létrehoz egy mappát, amely tartalmazza az összes szükségeset Angular projekthez szükséges fájlok dolgozni.
    ng új elektron-app
  3. Az alkalmazás gyökérmappájában használja a npm az Electron telepítéséhez.
    npm telepítés--save-dev elektron
  4. Ezzel új mappát hoz létre az Electron számára az alkalmazás node_modules mappájában.
  5. Az Electront globálisan is telepítheti számítógépére.
    npm telepítés -g elektron

A szögelektron alkalmazás fájlszerkezete

Az Electronnak szüksége lesz egy fő JavaScript-fájlra az asztali ablak létrehozásához és kezeléséhez. Ez az ablak az alkalmazás tartalmát jeleníti meg benne. A JavaScript fájl egyéb eseményeket is tartalmazhat, amelyek előfordulhatnak, például ha a felhasználó bezárja az ablakot.

Futás közben a megjelenített tartalom az index.html fájlból származik. Alapértelmezés szerint az index.html fájl a fájlban található src mappát, és futás közben automatikusan létrejön egy beépített másolat a mappában ker mappát.

Az index.html fájl általában így néz ki:

<!doctype html>
<html lang="hu">
<fej>
<meta karakterkészlet="utf-8">
<cím> ElectronApp </title>
<alap href="./">
<meta név="nézetablak" tartalom="szélesség=eszköz-szélesség, kezdeti lépték=1">
<link rel="ikon" típus="kép/x-ikon" href="favicon.ico">
</head>
<test>
<app-root></app-root>
</body>
</html>

A törzscímke belsejében egy címke. Ez megjeleníti az Angular alkalmazás fő alkalmazáskomponensét. Az alkalmazás fő összetevőjét a src/app mappát.

Hogyan használjuk az Electront egy szögletes alkalmazás megnyitásához asztali ablakban

Hozza létre a main.js fájlt, és állítsa be úgy, hogy az alkalmazás tartalmát egy asztali ablakban nyissa meg.

  1. Hozzon létre egy fájlt a nevű projektjének gyökerében main.js. Ebben a fájlban inicializálja az Electront, hogy felhasználhassa az alkalmazásablak létrehozásához.
    const { app, BrowserWindow } = igényelnek('elektron');
  2. Hozzon létre egy bizonyos szélességű és magasságú új asztali ablakot. Az ablakban megjelenítendő tartalomként töltse be az indexfájlt. Győződjön meg arról, hogy az indexfájl elérési útja megegyezik az alkalmazás nevével. Ha például az alkalmazást "electron-app"-nak nevezte el, akkor az elérési út a következő lesz: "dist/electron-app/index.html".
    funkcióCreateWindow() {
     nyerni = új BrowserWindow({szélesség: 800, magasság: 800});
     win.loadFile('dist/electron-app/index.html');
    }
  3. Amikor az alkalmazás készen áll, hívja meg a createWindow() függvényt. Ezzel létrehozza az alkalmazás ablakát.
    app.whenReady().then(() => {
     CreateWindow()
    })
  4. Ban,-ben src/index.html fájlban, a bázis címkét, módosítsa a href attribútumot "./"-re.
    <alap href="./">
  5. Ban ben package.json, add hozzá a fő- mezőbe, és adja meg a main.js fájlt értékként. Ez lesz az alkalmazás belépési pontja, így az alkalmazás a main.js fájlt futtatja, amikor elindítja az alkalmazást.
    {
    "név": "elektron-app",
    "változat": "0.0.0",
    "fő-": "main.js",
     ...
    }
  6. Ban,-ben .browserslistrc fájlt, módosítsa a listát az iOS Safari 15.2-15.3 verzióinak eltávolításához. Ez megakadályozza, hogy a kompatibilitási hibák megjelenjenek a konzolon fordításkor.
    utolsó 1 Chrome-verzió
    utolsó 1 Firefox verzió
    utolsó 2 Edge főverziók
    utolsó 2 Safari főverzió
    utolsó 2 iOS főverzió
    Firefox ESR
    nemios_saf 15.2-15.3
    nemszafari 15.2-15.3
  7. Törölje az alapértelmezett tartalmat a src/app/app.component.html fájlt. Cserélje ki valamilyen új tartalommal.
    <div class="tartalom">
    <div class="kártya">
    <h2> itthon </h2>
    <p>
     Üdvözöljük Angular Electron alkalmazásomban!
    </p>
    </div>
    </div>
  8. Adjon hozzá némi stílust a tartalomhoz src/app/app.component.css fájlt.
    .tartalom {
     vonalmagasság: 2 rem;
    betűméret: 1.2em;
     margó: 48 képpont 10%;
     font-család: Arial, sans-serif
    }
    .kártya {
    doboz-árnyék: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
     szélesség: 85%;
     padding: 16px 48px;
     margó: 24 képpont 0 képpont;
     háttérszín: fehér füst;
     font-family: sans-serif;
    }
  9. Adjon hozzá némi általános stílust a src/styles.css fájlt az alapértelmezett margók és kitömések eltávolításához.
    html {
     margó: 0;
     párnázás: 0;
    }

Elektronalkalmazás futtatása

Az alkalmazás ablakban történő futtatásához konfiguráljon egy parancsot a package.json fájl szkripttömbjében. Ezután futtassa az alkalmazást a terminálban található paranccsal.

  1. Ban ben package.json, a szkriptek tömbjén belül adjon hozzá egy parancsot az Angular alkalmazás létrehozásához és az Electron futtatásához. Ügyeljen arra, hogy a Scripts tömb előző bejegyzése után vesszőt adjon meg.
    "forgatókönyvek": {
     ...
    "elektron": "ng build && elektron ."
    },
  2. Az új Angular alkalmazás asztali ablakban való futtatásához futtassa a következőket a parancssorban, a projekt gyökérmappájában:
    npm futási elektron
  3. Várja meg, amíg az alkalmazás összeáll. Ha elkészült, ahelyett, hogy az Angular alkalmazás megnyílna a böngészőben, egy asztali ablak nyílik meg. Az asztali ablakban megjelenik az Angular alkalmazás tartalma.
  4. Ha továbbra is meg szeretné tekinteni az alkalmazást a webböngészőben, továbbra is futtathatja az ng serve parancsot.
    ng szolgálni
  5. Ha használja a ng szolgálni parancsot, az alkalmazás tartalma továbbra is megjelenik a webböngészőben a címen localhost: 4200.

Asztali alkalmazások készítése Electron segítségével

Az Electron segítségével asztali alkalmazásokat készíthet Windows, Mac és Linux rendszeren. Alapértelmezés szerint az Angular alkalmazást webböngészővel tesztelheti az ng serve paranccsal. Az Angular alkalmazást beállíthatja úgy is, hogy az asztali ablakban is megnyíljon a webböngésző helyett.

Ezt egy JavaScript fájl segítségével teheti meg. Ezenkívül be kell állítania az index.html és a package.json fájlokat. Az általános alkalmazás továbbra is ugyanazt a struktúrát fogja követni, mint a hagyományos Angular alkalmazás.

Ha többet szeretne megtudni az asztali alkalmazások létrehozásáról, fedezze fel a Windows Forms alkalmazásokat is. A Windows Forms-alkalmazások lehetővé teszik a felhasználói felület elemeinek kattintását és ráhúzását a vászonra, miközben bármilyen kódolási logikát hozzáadhat a C#-fájlokhoz.