Electron võimaldab teil luua töölauarakendusi Windowsi, Maci ja Linuxi jaoks. Kui loote rakenduse Electroni abil, saate rakenduse eelvaate ja käivitada töölauarakenduse akna kaudu.
Saate kasutada Electronit, et konfigureerida Angular rakendus tavalise veebibrauseri asemel töölauaaknas käivitamiseks. Seda saate teha rakenduses endas oleva JavaScripti faili abil.
Kui olete Electroni konfigureerinud, saate arendamist jätkata nagu tavalise Angulari rakenduse puhul. Rakenduse põhiosad järgivad endiselt sama standardset nurkstruktuuri.
Kuidas installida Electron oma rakenduse osana
Electroni kasutamiseks peate alla laadima ja installima node.js ning kasutama npm install, et lisada rakendusse Electron.
- Laadige alla ja installige node.js. Saate veenduda, et olete selle õigesti installinud, kontrollides versiooni:
Sõlm sisaldab ka npm, JavaScripti paketihaldur. Saate kinnitada, et npm on installitud, kontrollides npm versiooni:sõlm -vnpm -v - Looge uus Angular rakendus, kasutades uus käsk. See loob kausta, mis sisaldab kõike vajalikku
Angular projekti jaoks vajalikud failid töötama.
ng uus elektron-rakendus - Kasutage oma rakenduse juurkaustas npm Electroni installimiseks.
npm installida--save-dev elektron - See loob rakenduse kaustas node_modules Electroni jaoks uue kausta.
- Saate Electroni oma arvutisse installida ka globaalselt.
npm installida -g elektron
Nurgaelektroni rakenduse failistruktuur
Electron vajab töölauaakna loomiseks ja haldamiseks peamist JavaScripti faili. See aken kuvab selles teie rakenduse sisu. JavaScripti fail sisaldab ka muid sündmusi, mis võivad tekkida, näiteks kui kasutaja sulgeb akna.
Käitusajal kuvatav sisu pärineb failist index.html. Vaikimisi leiate faili index.html failist src kausta ja käivitamise ajal luuakse selle sisseehitatud koopia automaatselt dist kausta.
Fail index.html näeb tavaliselt välja selline:
<!doctype html>
<html lang="et">
<pea>
<metamärgistik="utf-8">
<pealkiri> ElectronApp </title>
<baas href="./">
<meta nimi="vaateava" sisu="laius = seadme laius, esialgne skaala = 1">
<link rel="ikooni" tüüp="pilt/x-ikoon" href="favicon.ico">
</head>
<keha>
<app-root></app-root>
</body>
</html>Kehasildi sees on
Kuidas kasutada elektroni nurgarakenduse avamiseks töölauaaknas
Looge fail main.js ja konfigureerige see nii, et see avaks rakenduse sisu töölauaaknas.
- Looge oma projekti nimega juurfaili fail main.js. Selles failis lähtestage Electron, et saaksite seda kasutada rakenduse akna loomiseks.
konst { app, BrowserWindow } = nõuda('elektron'); - Looge uus teatud laiuse ja kõrgusega töölauaaken. Laadige aknas kuvatava sisuna registrifail. Veenduge, et registrifaili tee ühtiks teie rakenduse nimega. Näiteks kui panite oma rakenduse nimeks "electron-app", on teeks "dist/electron-app/index.html".
funktsioonilooAken() {
võit = uus BrowserWindow({laius: 800, kõrgus: 800});
win.loadFile('dist/electron-app/index.html');
} - Kui rakendus on valmis, helistage funktsioonile createWindow(). See loob teie rakenduse jaoks rakenduse akna.
app.whenReady().then(() => {
looAken()
}) - Aastal src/index.html failis alus märgendi, muutke atribuut href väärtuseks "./".
<baas href="./"> - sisse package.json, Lisa peamine väljale ja lisage väärtusena fail main.js. See on rakenduse sisenemispunkt, nii et rakendus käivitab rakenduse käivitamisel faili main.js.
{
"nimi": "elektron-rakendus",
"versioon": "0.0.0",
"peamine": "main.js",
...
} - Aastal .browserslistrc faili, muutke loendit, et eemaldada iOS-i safari versioonid 15.2–15.3. See hoiab ära ühilduvusvigade kuvamise konsoolis kompileerimise ajal.
viimane 1 Chrome'i versioon
viimane 1 Firefoxi versioon
viimased 2 Edge suuremat versiooni
2 viimast Safari suuremat versiooni
2 viimast iOS-i peamist versiooni
Firefox ESR
mitteios_saf 15.2-15.3
mittesafari 15.2-15.3 - Kustutage failis vaikesisu src/app/app.component.html faili. Asendage see mõne uue sisuga.
<div klass="sisu">
<div klass="kaardile">
<h2> Kodu </h2>
<lk>
Tere tulemast minu Angular Electroni rakendusse!
</lk>
</div>
</div> - Lisage sisule veidi stiili src/app/app.component.css faili.
.sisu {
joone kõrgus: 2rem;
fondi suurus: 1.2em;
veeris: 48px 10%;
fondiperekond: Arial, sans-serif
}
.kaart {
kast-vari: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
laius: 85%;
polster: 16px 48px;
veeris: 24 pikslit 0 pikslit;
taustavärv: valge suitsu;
fondiperekond: sans-serif;
} - Lisage sellele veidi üldist stiili src/styles.css faili vaikeveeriste ja polsterduste eemaldamiseks.
html {
marginaal: 0;
polsterdus: 0;
}
Kuidas käivitada elektronrakendust
Rakenduse aknas käitamiseks konfigureerige faili package.json skriptide massiivi käsk. Seejärel käivitage rakendus terminalis oleva käsu abil.
- sisse package.json, lisage skriptimassiivi sisse käsk Angular rakenduse loomiseks ja Electroni käivitamiseks. Veenduge, et lisate massiivi Skriptid eelneva kirje järele koma.
"skriptid": {
...
"elektron": "ehitada && elektron ."
}, - Uue Angulari rakenduse käivitamiseks töölauaaknas käivitage oma projekti juurkaustas käsureal järgmine:
npm jooksuelektron - Oodake, kuni teie taotlus koostatakse. Kui olete lõpetanud, avaneb veebibrauseris Angular-rakenduse asemel töölauaaken. Töölauaaknas kuvatakse teie Angular rakenduse sisu.
- Kui soovite endiselt oma rakendust veebibrauseris vaadata, saate siiski käivitada käsu ng serve.
teenida - Kui kasutate teenida käsku, kuvatakse teie rakenduse sisu endiselt veebibrauseris aadressil kohalik host: 4200.
Töölauarakenduste loomine elektronidega
Electroni saate kasutada Windowsi, Maci ja Linuxi töölauarakenduste loomiseks. Vaikimisi saate Angular-rakendust testida veebibrauseris käsu ng serve kaudu. Saate konfigureerida oma Angular-rakenduse veebibrauseri asemel avanema ka töölauaaknas.
Seda saate teha JavaScripti faili abil. Samuti peate konfigureerima failid index.html ja package.json. Üldine rakendus järgib endiselt sama struktuuri kui tavaline Angular rakendus.
Kui soovite lisateavet töölauarakenduste loomise kohta, võite uurida ka Windows Formsi rakendusi. Windows Formsi rakendused võimaldavad teil klõpsata ja lohistada kasutajaliidese elemente lõuendile, lisades samal ajal ka mis tahes kodeerimisloogika C#-failidesse.
