Elektronų pagrindai: kaip sukonfigūruoti ir paleisti kampinę elektronų programą

„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.

kaip rasti mano pagrindinės plokštės modelį

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 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.

Atsisiųskite ir įdiekite node.js . Galite patvirtinti, kad jį tinkamai įdiegėte, patikrinę versiją:
```
node -v
```
Mazgas taip pat apima npm, „JavaScript“ paketų tvarkyklė . Galite patvirtinti, kad įdiegėte npm, patikrinę npm versiją:
```
npm -v
```
Sukurkite naują „Angular“ programą naudodami naujų komandą. Taip bus sukurtas aplankas, kuriame bus viskas, ko reikia Angular projektui reikalingi failai dirbti.
```
ng new electron-app
```
Programos šakniniame aplanke naudokite npm įdiegti Electron.
```
npm install --save-dev electron
```
Tai sukurs naują Electron aplanką programos aplanke node_modules.
Taip pat savo kompiuteryje galite įdiegti „Electron“ visame pasaulyje.
```
npm install -g electron 
```

Kampinio elektrono programos failo struktūra

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

pašalinti skelbimus nuo ugnies 7

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ą.

Pagrindinės programos komponento vieta aplanke

Failas index.html paprastai atrodo taip:

<!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>

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 main.js failą ir sukonfigūruokite jį, kad programos turinys būtų atidarytas darbalaukio lange.

„mac os“ emuliatorius, skirtas „Windows 10“

Sukurkite failą savo projekto šaknyje pavadinimu main.js . Šiame faile inicijuokite Electron, kad galėtumėte jį naudoti kurdami programos langą.
```
const { app, BrowserWindow } = require('electron');
```
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 jūsų programos pavadinimą. Pavyzdžiui, jei programą pavadinote „electron-app“, kelias bus „dist/electron-app/index.html“.
```
function createWindow() { 
  win = new BrowserWindow({width: 800, height: 800}); 
  win.loadFile('dist/electron-app/index.html'); 
}
```
Kai programa bus paruošta, iškvieskite funkciją createWindow(). Bus sukurtas programos langas.
```
app.whenReady().then(() => { 
  createWindow() 
})
```
Viduje src/index.html faile, esančiame bazė žymą, pakeiskite atributą href į './'.
```
<base href="./">
```
Į package.json , Pridėti pagrindinis lauką ir kaip reikšmę įtraukite failą main.js. Tai bus programos įėjimo taškas, kad programa paleis programą main.js failą.
```
{ 
  "name": "electron-app", 
  "version": "0.0.0", 
  "main" : "main.js", 
  .... 
}
```

Viduje .browserslistrc failą, pakeiskite sąrašą, kad pašalintumėte „iOS safari“ 15.2–15.3 versijas. Taip kompiliuojant pulte nebus rodomos suderinamumo klaidos.

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

Ištrinkite numatytąjį turinį src/app/app.component.html failą. Pakeiskite jį nauju turiniu.

<div class="content"> 
  <div class="card"> 
    <h2> Home </h2> 
    <p> 
      Welcome to my Angular Electron application! 
    </p> 
  </div> 
</div>

Pridėkite šiek tiek turinio stiliaus src/app/app.component.css failas.

.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; 
}

Pridėkite šiek tiek bendro stiliaus src/styles.css failą, kad pašalintumėte numatytąsias paraštes ir užpildus.
```
html { 
  margin: 0; 
  padding: 0; 
}
```

Kaip paleisti elektroninę programą

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

Į 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į.
```
"scripts": { 
  ... 
  "electron": "ng build && electron ." 
},
```
Norėdami paleisti naują „Angular“ programą darbalaukio lange, komandų eilutėje savo projekto šakniniame aplanke paleiskite šiuos veiksmus:
```
npm run electron
```
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.
Jei vis tiek norite peržiūrėti programą žiniatinklio naršyklėje, vis tiek galite paleisti komandą ng serve.
```
ng serve
```
Jei naudojate 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ą, kad ji taip pat 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.