„Electron“ leidžia kurti darbalaukio programas, skirtas „Windows“, „Mac“ ir „Linux“. Kai kuriate programą naudodami Electron, galite peržiūrėti ir paleisti programą darbalaukio programos lange.

Galite naudoti Electron norėdami sukonfigūruoti Angular programą, kuri būtų paleista darbalaukio lange, o ne įprastoje žiniatinklio naršyklėje. Tai galite padaryti naudodami JavaScript failą pačioje programoje.

Sukonfigūravę „Electron“, galite tęsti plėtrą, kaip tai darytumėte įprastoje „Angular“ programoje. Pagrindinės programos dalys vis tiek bus tokios pat standartinės kampinės struktūros.

Kaip įdiegti „Electron“ kaip programos dalį

Norėdami naudoti „Electron“, turite atsisiųsti ir įdiegti node.js ir naudoti „npm install“, kad pridėtumėte „Electron“ prie programos.

  1. Atsisiųskite ir įdiekite node.js. Galite patikrinti, ar jį tinkamai įdiegėte, patikrinę versiją:
    mazgas -v
    Mazgas taip pat apima npm, „JavaScript“ paketų tvarkyklė. Galite patvirtinti, kad įdiegėte npm, patikrinę npm versiją:
    npm -v
  2. Sukurkite naują „Angular“ programą naudodami
    instagram viewer
    naujas komandą. Taip bus sukurtas aplankas, kuriame bus viskas, ko reikia Angular projektui reikalingi failai dirbti.
    ng naujas elektronų programa
  3. Programos šakniniame aplanke naudokite npm įdiegti Electron.
    npm diegti--Save-dev elektronas
  4. Tai sukurs naują Electron aplanką programos aplanke node_modules.
  5. Taip pat savo kompiuteryje galite įdiegti Electron visame pasaulyje.
    npm diegti -g elektronas

Kampinio elektrono programos failo struktūra

Norint sukurti ir valdyti darbalaukio langą, Electron reikės pagrindinio „JavaScript“ failo. Šiame lange bus rodomas jūsų programos turinys. „JavaScript“ faile taip pat bus kitų įvykių, kurie gali įvykti, pvz., jei vartotojas uždarys langą.

Vykdymo metu rodomas turinys bus iš failo index.html. Pagal numatytuosius nustatymus failą index.html galite rasti viduje src aplanką, o vykdymo metu automatiškai sukuriama jo kopija raj aplanką.

Failas index.html paprastai atrodo taip:

<!doctype html>
<html lang="lt">
<galva>
<meta charset="utf-8">
<titulą> ElectronApp </title>
<bazė href="./">
<meta vardas ="peržiūros sritis" turinys="plotis = įrenginio plotis, pradinė skalė = 1">
<nuoroda rel="piktogramą" tipas ="vaizdas / x piktograma" href="favicon.ico">
</head>
<kūnas>
<app-root></app-root>
</body>
</html>

Turinio žymos viduje yra žyma. Bus rodomas pagrindinis programos „Angular“ komponentas. Pagrindinį programos komponentą galite rasti src/app aplanką.

Kaip naudoti elektroną norint atidaryti kampinę programą darbalaukio lange

Sukurkite failą main.js ir sukonfigūruokite jį, kad programos turinys būtų atidarytas darbalaukio lange.

  1. Sukurkite failą savo projekto šaknyje pavadinimu main.js. Šiame faile inicijuokite Electron, kad galėtumėte jį naudoti kurdami programos langą.
    konst { programa, naršyklės langas } = reikalauti(„elektronas“);
  2. Sukurkite naują tam tikro pločio ir aukščio darbalaukio langą. Įkelkite rodyklės failą kaip turinį, kuris bus rodomas lange. Įsitikinkite, kad indekso failo kelias atitinka programos pavadinimą. Pavyzdžiui, jei programą pavadinote „electron-app“, kelias bus „dist/electron-app/index.html“.
    funkcijasukurti langą() {
     laimėti = naujas Naršyklės langas ({plotis: 800, aukščio: 800});
     win.loadFile('dist/electron-app/index.html');
    }
  3. Kai programa bus paruošta, iškvieskite funkciją createWindow(). Taip bus sukurtas programos langas.
    app.whenReady().tad(() => {
     sukurti langą ()
    })
  4. Viduje src/index.html faile, esančiame bazė žymą, pakeiskite atributą href į „./“.
    <bazė href="./">
  5. Į package.json, Pridėti pagrindinis lauką ir kaip reikšmę įtraukite failą main.js. Tai bus programos įėjimo taškas, kad programa paleisdama programą paleistų failą main.js.
    {
    "vardas": "elektronų programa",
    "versija": "0.0.0",
    "pagrindinis": "main.js",
     ...
    }
  6. Viduje .browserslistrc failą, pakeiskite sąrašą, kad pašalintumėte „iOS safari“ 15.2–15.3 versijas. Tai leis išvengti suderinamumo klaidų, kurios bus rodomos konsolėje kompiliuojant.
    paskutinė 1 „Chrome“ versija
    paskutinė 1 Firefox versija
    paskutinės 2 Edge pagrindinės versijos
    paskutinės 2 pagrindinės „Safari“ versijos
    paskutinės 2 pagrindinės iOS versijos
    Firefox ESR
    neios_saf 15.2-15.3
    nesafari 15.2-15.3
  7. Ištrinkite numatytąjį turinį src/app/app.component.html failą. Pakeiskite jį nauju turiniu.
    <div klasė ="turinys">
    <div klasė ="kortelę">
    <h2> Namai </h2>
    <p>
     Sveiki atvykę į mano „Angular Electron“ programą!
    </p>
    </div>
    </div>
  8. Pridėkite šiek tiek turinio stiliaus src/app/app.component.css failą.
    .turinys {
     linijos aukštis: 2rem;
    šrifto dydis: 1.2em;
     paraštė: 48 piks. 10 %;
     šriftų šeima: Arial, sans-serif
    }
    .kortelė {
    dėžutė-šešėlis: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
     plotis: 85%;
     užpildymas: 16 pikselių 48 pikselių;
     paraštė: 24 piks. 0 tšk.;
     fono spalva: whitesmoke;
     šriftų šeima: sans-serif;
    }
  9. Pridėkite šiek tiek bendro stiliaus src/styles.css failą, kad pašalintumėte numatytąsias paraštes ir užpildus.
    html {
     paraštė: 0;
     paminkštinimas: 0;
    }

Kaip paleisti elektroninę programą

Norėdami paleisti programą lange, sukonfigūruokite komandą paketo.json scenarijų masyve. Tada paleiskite programą naudodami komandą terminale.

  1. Į package.json, scenarijų masyve pridėkite komandą, kad sukurtumėte „Angular“ programą ir paleistumėte „Electron“. Įsitikinkite, kad po ankstesnio įrašo scenarijų masyve pridėjote kablelį.
    "scenarijus": {
     ...
    "elektronas": "statyti && elektronas ."
    },
  2. Norėdami paleisti naują „Angular“ programą darbalaukio lange, komandų eilutėje savo projekto šakniniame aplanke paleiskite šiuos veiksmus:
    npm paleisti elektroną
  3. Palaukite, kol jūsų paraiška bus sudaryta. Kai baigsite, vietoj jūsų „Angular“ programos atsidarys žiniatinklio naršyklėje, atsidarys darbalaukio langas. Darbalaukio lange bus rodomas jūsų Angular programos turinys.
  4. Jei vis tiek norite peržiūrėti programą žiniatinklio naršyklėje, vis tiek galite paleisti komandą ng serve.
    ng tarnauti
  5. Jei naudojate ng tarnauti komandą, jūsų programos turinys vis tiek bus rodomas žiniatinklio naršyklėje adresu Localhost: 4200.

Darbalaukio programų kūrimas naudojant elektroną

Galite naudoti „Electron“ darbalaukio programoms kurti „Windows“, „Mac“ ir „Linux“. Pagal numatytuosius nustatymus galite išbandyti Angular programą naudodami žiniatinklio naršyklę naudodami komandą ng serve. Galite sukonfigūruoti savo Angular programą taip, kad ji būtų atidaryta darbalaukio lange, o ne žiniatinklio naršyklėje.

Tai galite padaryti naudodami JavaScript failą. Taip pat turėsite sukonfigūruoti failus index.html ir package.json. Bendra programa vis tiek bus tokia pati kaip ir įprasta kampinė programa.

Jei norite sužinoti daugiau apie tai, kaip kurti darbalaukio programas, taip pat galite naršyti „Windows Forms“ programas. „Windows Forms“ programos leidžia spustelėti ir vilkti vartotojo sąsajos elementus ant drobės, kartu įtraukiant bet kokią kodavimo logiką į C# failus.