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.

  1. Lejupielādēt un instalēt node.js. Varat pārbaudīt, vai tas ir pareizi instalēts, pārbaudot versiju:
    mezgls -v
    Node ietver arī npm, JavaScript pakotņu pārvaldnieks. Varat pārbaudīt, vai npm ir instalēts, pārbaudot npm versiju:
    npm -v
    2. instagram viewer
  2. Izveidojiet jaunu Angular lietojumprogrammu, izmantojot jauns komandu. Tādējādi tiks izveidota mape, kurā būs viss nepieciešamais faili, kas nepieciešami Angular projektam strādāt.
    ng jauns elektronu lietotne
  3. Lietojumprogrammas saknes mapē izmantojiet npm lai instalētu Electron.
    npm uzstādīt--save-dev elektrons
  4. Tādējādi lietotnes mapē node_modules tiks izveidota jauna Electron mape.
  5. Varat arī datorā instalēt Electron globāli.
    npm uzstādīt -g elektrons

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.

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.

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

<!doctype html>
<html lang="lv">
<galvu>
<meta rakstzīmju kopa ="utf-8">
<virsraksts> ElectronApp </title>
<bāzes href="./">
<meta nosaukums ="skata logs" saturs="platums = ierīces platums, sākotnējais mērogs = 1">
<saite rel="ikonu" tips="attēls/x-ikona" href="favicon.ico">
</head>
<ķermenis>
<app-root></app-root>
</body>
</html>

Pamata atzīmes iekšpusē ir tagu. 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ā.

  1. Izveidojiet failu sava projekta saknē ar nosaukumu galvenais.js. Šajā failā inicializējiet Electron, lai varētu to izmantot lietojumprogrammas loga izveidei.
    konst { app, BrowserWindow } = pieprasīt("elektrons");
  2. 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 lietotnei nosaucāt nosaukumu “electron-app”, ceļš būs “dist/electron-app/index.html”.
    funkcijuizveidot logu() {
     uzvarēt = jauns BrowserWindow({platums: 800, augstums: 800});
     win.loadFile('dist/electron-app/index.html');
    }
  3. Kad lietotne ir gatava, izsauciet funkciju createWindow(). Tādējādi jūsu lietotnei tiks izveidots lietojumprogrammas logs.
    app.whenReady().then(() => {
     izveidotWindow()
    })
  4. Iekš src/index.html failā bāze tagu, mainiet atribūtu href uz "./".
    <bāzes href="./">
  5. In pack.json, pievienojiet a galvenais laukā un kā vērtību iekļaujiet failu main.js. Tas būs lietotnes ievades punkts, lai lietojumprogramma palaistu failu main.js, palaižot lietotni.
    {
    "nosaukums": "elektronu lietotne",
    "versija": "0.0.0",
    "galvenais": "galvenais.js",
     ...
    }
  6. 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ā.
    pēdējā 1 Chrome versija
    pēdējā 1 Firefox versija
    pēdējās 2 Edge galvenās versijas
    pēdējās 2 galvenās Safari versijas
    pēdējās 2 iOS galvenās versijas
    Firefox ESR
    nēios_saf 15.2-15.3
    nēsafari 15.2-15.3
  7. Dzēsiet noklusējuma saturu mapē src/app/app.component.html failu. Aizstājiet to ar jaunu saturu.
    <div klase="saturu">
    <div klase="karti">
    <h2> Mājas </h2>
    <lpp>
     Laipni lūdzam manā Angular Electron lietojumprogrammā!
    </lpp>
    </div>
    </div>
  8. Pievienojiet saturu saturam src/app/app.component.css failu.
    .saturs {
     līnijas augstums: 2rem;
    fonta izmērs: 1.2em;
     piemale: 48 pikseļi 10%;
     fontu saime: Arial, sans-serif
    }
    .karte {
    kaste-ēna: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
     platums: 85%;
     polsterējums: 16 pikseļi 48 pikseļi;
     piemale: 24 pikseļi 0 pikseļi;
     fona krāsa: whitesmoke;
     fontu saime: sans-serif;
    }
  9. Pievienojiet tam vispārēju stilu src/styles.css failu, lai noņemtu noklusējuma piemales un polsterējumus.
    html {
     piemale: 0;
     polsterējums: 0;
    }

Kā palaist elektronu lietojumprogrammu

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

  1. In pack.json, skriptu masīvā pievienojiet komandu, lai izveidotu lietotni Angular un palaistu Electron. Noteikti pievienojiet komatu aiz iepriekšējā ieraksta masīvā Skripti.
    "skripti": {
     ...
    "elektrons": "būvēt && elektrons ."
    },
  2. Lai palaistu jauno Angular lietojumprogrammu darbvirsmas logā, komandrindā, sava projekta saknes mapē, palaidiet tālāk norādīto.
    npm palaist elektronu
  3. Pagaidiet, kamēr jūsu pieteikums tiks apkopots. Kad tas būs pabeigts, tā vietā, lai tīmekļa pārlūkprogrammā tiktu atvērta lietotne Angular, tiks atvērts darbvirsmas logs. Darbvirsmas logā tiks parādīts jūsu Angular lietotnes saturs.
  4. Ja joprojām vēlaties skatīt savu lietojumprogrammu tīmekļa pārlūkprogrammā, joprojām varat palaist komandu ng serve.
    ng kalpot
  5. Ja jūs izmantojat ng 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.