Elektronu pamati: kā konfigurēt un palaist leņķisko elektronu lietotni

Electron ļauj izveidot darbvirsmas lietojumprogrammas operētājsistēmai Windows, Mac un Linux. Kad veidojat lietotni, izmantojot Electron, varat priekšskatīt un palaist lietotni, izmantojot darbvirsmas lietojumprogrammas logu.

Varat izmantot Electron, lai konfigurētu Angular lietotni, lai tā tiktu palaists darbvirsmas logā, nevis parastajā tīmekļa pārlūkprogrammā. To var izdarīt, izmantojot JavaScript failu pašā lietotnē.

Kad esat konfigurējis Electron, varat turpināt izstrādi tāpat kā parastā Angular lietotnē. Lietojumprogrammas galvenajām daļām joprojām būs tāda pati standarta leņķiskā struktūra.

Kā instalēt Electron kā daļu no lietojumprogrammas

Lai izmantotu Electron, jums ir jālejupielādē un jāinstalē node.js un jāizmanto npm install, lai programmai pievienotu Electron.

Lejupielādēt un instalēt node.js . Varat pārliecināties, ka esat to pareizi instalējis, pārbaudot versiju:
```
node -v
```
Node ietver arī npm, JavaScript pakotņu pārvaldnieks . Varat apstiprināt, ka npm ir instalēts, pārbaudot npm versiju:
```
npm -v
```
Izveidojiet jaunu Angular lietojumprogrammu, izmantojot no jauna komandu. Tādējādi tiks izveidota mape, kurā būs viss nepieciešamais faili, kas nepieciešami Angular projektam strādāt.
```
ng new electron-app
```
Lietojumprogrammas saknes mapē izmantojiet npm lai instalētu Electron.
```
npm install --save-dev electron
```
Tādējādi lietotnes mapē node_modules tiks izveidota jauna Electron mape.
Varat arī datorā instalēt Electron globāli.
```
npm install -g electron 
```

Leņķisko elektronu lietojumprogrammas faila struktūra

Lai izveidotu un pārvaldītu darbvirsmas logu, Electron būs nepieciešams galvenais JavaScript fails. Šajā logā tiks parādīts jūsu lietotnes saturs. JavaScript failā būs arī citi notikumi, kas var notikt, piemēram, ja lietotājs aizver logu.

kāpēc Windows 7 ir labāks par 10

indeksēt HTML faila atrašanās vietu projektā

Izpildes laikā parādītais saturs nāks no faila index.html. Pēc noklusējuma jūs varat atrast failu index.html iekšpusē src mapē, un izpildes laikā mapē tiek automātiski izveidota tās iebūvēta kopija dist mapi.

Galvenās lietotnes komponenta atrašanās vieta mapē

Fails index.html parasti izskatās šādi:

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

Pamatteksta taga iekšpusē ir tags . Tiks parādīts galvenais lietotnes komponents Angular lietojumprogrammai. Programmas galveno komponentu varat atrast src/app mapi.

Kā izmantot elektronu, lai darbvirsmas logā atvērtu leņķisko lietojumprogrammu

Izveidojiet failu main.js un konfigurējiet to, lai atvērtu lietojumprogrammas saturu darbvirsmas logā.

Izveidojiet failu sava projekta saknē ar nosaukumu galvenais.js . Šajā failā inicializējiet Electron, lai varētu to izmantot lietojumprogrammas loga izveidei.
```
const { app, BrowserWindow } = require('electron');
```
Izveidojiet jaunu noteikta platuma un augstuma darbvirsmas logu. Ielādējiet indeksa failu kā saturu, kas jāparāda logā. Pārliecinieties, vai ceļš uz indeksa failu atbilst jūsu lietotnes nosaukumam. Piemēram, ja savai lietotnei nosaucāt nosaukumu 'electron-app', ceļš būs 'dist/electron-app/index.html'.
```
function createWindow() { 
  win = new BrowserWindow({width: 800, height: 800}); 
  win.loadFile('dist/electron-app/index.html'); 
}
```
Kad lietotne ir gatava, izsauciet funkciju createWindow(). Tiks izveidots jūsu lietotnes lietojumprogrammas logs.
```
app.whenReady().then(() => { 
  createWindow() 
})
```
Iekš src/index.html failā bāze tagu, mainiet atribūtu href uz './'.
```
<base href="./">
```
In pack.json , pievienojiet a galvenais laukā un kā vērtību iekļaujiet failu main.js. Tas būs lietotnes ieejas punkts, lai lietojumprogramma palaistu failu main.js, palaižot lietotni.
```
{ 
  "name": "electron-app", 
  "version": "0.0.0", 
  "main" : "main.js", 
  .... 
}
```

Iekš .browserslistrc failu, mainiet sarakstu, lai noņemtu iOS safari versijas 15.2–15.3. Tas novērsīs saderības kļūdu rādīšanu konsolē kompilēšanas laikā.

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

Dzēsiet noklusējuma saturu mapē src/app/app.component.html failu. Aizstājiet to ar jaunu saturu.

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

Pievienojiet saturu saturam src/app/app.component.css fails.

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

Pievienojiet tam vispārēju stilu src/styles.css failu, lai noņemtu noklusējuma piemales un polsterējumus.
```
html { 
  margin: 0; 
  padding: 0; 
}
```

Kā palaist elektronu lietojumprogrammu

Lai palaistu lietojumprogrammu logā, konfigurējiet komandu paketes.json skriptu masīvā. Pēc tam palaidiet savu lietotni, izmantojot komandu terminālī.

In pack.json , skriptu masīvā pievienojiet komandu, lai izveidotu lietotni Angular un palaistu Electron. Noteikti pievienojiet komatu aiz iepriekšējā ieraksta skriptu masīvā.
```
"scripts": { 
  ... 
  "electron": "ng build && electron ." 
},
```
Lai palaistu jauno Angular lietojumprogrammu darbvirsmas logā, komandrindā sava projekta saknes mapē palaidiet šādu:
```
npm run electron
```
Pagaidiet, līdz jūsu pieteikums tiks apkopots. Pēc pabeigšanas tā vietā, lai tīmekļa pārlūkprogrammā atvērtu lietotni Angular, tiks atvērts darbvirsmas logs. Darbvirsmas logā tiks parādīts jūsu Angular lietotnes saturs.
Ja joprojām vēlaties skatīt savu lietojumprogrammu tīmekļa pārlūkprogrammā, joprojām varat palaist komandu ng serve.
```
ng serve
```
Ja jūs izmantojat no kalpot komandu, jūsu lietotnes saturs joprojām tiks rādīts tīmekļa pārlūkprogrammā vietnē vietējais saimnieks: 4200.

Darbvirsmas lietojumprogrammu izveide, izmantojot elektronu

Varat izmantot Electron, lai izveidotu darbvirsmas lietojumprogrammas operētājsistēmās Windows, Mac un Linux. Pēc noklusējuma jūs varat pārbaudīt Angular lietojumprogrammu, izmantojot tīmekļa pārlūkprogrammu, izmantojot komandu ng serve. Varat konfigurēt savu Angular lietojumprogrammu, lai tā tiktu atvērta arī darbvirsmas logā, nevis tīmekļa pārlūkprogrammā.

To var izdarīt, izmantojot JavaScript failu. Jums būs arī jākonfigurē faili index.html un package.json. Kopējai lietojumprogrammai joprojām būs tāda pati struktūra kā parastajai Angular lietojumprogrammai.

Ja vēlaties uzzināt vairāk par to, kā izveidot darbvirsmas lietojumprogrammas, varat arī izpētīt Windows Forms programmas. Programmas Windows Forms ļauj noklikšķināt un vilkt lietotāja interfeisa elementus uz audekla, vienlaikus pievienojot C# failiem jebkādu kodēšanas loģiku.