Šis raksts aptvers rokasgrāmatu par Electron instalēšanu un vienkāršas “Hello World” Electron lietojumprogrammas izveidi Linux.
Par Electron
Electron ir lietojumprogrammu izstrādes ietvars, ko izmanto, lai izveidotu starpplatformu darbvirsmas lietojumprogrammas, izmantojot tīmekļa tehnoloģijas atsevišķā tīmekļa pārlūkprogrammā. Tas nodrošina arī operētājsistēmas API un stabilu iepakošanas sistēmu, lai vieglāk izplatītu lietojumprogrammas. Tipiskai Electron lietošanai ir nepieciešamas trīs lietas: mezgls.js runtime, atsevišķs pārlūks, kas balstīts uz hromu, kas nāk ar Electron un OS specifiskām API.
Instalējiet mezglu.js
Jūs varat instalēt Node.js un “npm” pakotņu pārvaldnieks, palaižot šādu komandu Ubuntu:
$ sudo apt instalējiet nodejs npmVarat instalēt šīs paketes citos Linux izplatījumos no pakešu pārvaldnieka. Varat arī lejupielādēt oficiālos bināros failus, kas pieejami mezglā.js vietne.
Izveidojiet jaunu mezglu.js Projekts
Kad esat instalējis Node.js un “npm”, izveidojiet jaunu projektu ar nosaukumu “HelloWorld”, pēc kārtas izpildot šādas komandas:
$ mkdir HelloWorld$ cd HelloWorld
Pēc tam aktivizējiet terminālu direktorijā “HelloWorld” un palaidiet zemāk esošo komandu, lai inicializētu jaunu pakotni:
$ npm inicIet caur interaktīvo vedni terminālā un pēc vajadzības ievadiet nosaukumus un vērtības.
Pagaidiet, līdz instalēšana ir pabeigta. Tagad jums vajadzētu būt “iepakojumam.json ”fails“ HelloWorld ”direktorijā. Kam ir “pakete.json ”fails jūsu projekta direktorijā atvieglo projekta parametru konfigurēšanu un padara projektu pārnēsājamu, lai būtu vieglāk koplietot.
Sūtījums.json ”failā jābūt šādam ierakstam:
indekss "main": ".js "“Indekss.js ”ir vieta, kur atradīsies visa jūsu galvenās programmas loģika. Jūs varat izveidot papildu “.js ”,“.html ”un“.css ”faili atbilstoši jūsu vajadzībām. Šajā rokasgrāmatā izskaidrotās programmas “HelloWorld” vajadzībām zemāk esošā komanda izveidos trīs nepieciešamos failus:
$ touch indekss.js indekss.HTML indekss.cssInstalējiet Electron
Jūs varat instalēt Electron projekta direktorijā, izpildot zemāk esošo komandu:
$ npm instalējiet elektronu --save-devPagaidiet, līdz instalēšana ir pabeigta. Elektrons tagad tiks pievienots jūsu projektam kā atkarība, un jūsu projekta direktorijā jums vajadzētu redzēt mapi “mezglu_moduļi”. Electron instalēšana kā atkarība no projekta ir ieteicamais Electron instalēšanas veids saskaņā ar oficiālo Electron dokumentāciju. Tomēr, ja vēlaties sistēmā Electron instalēt globāli, varat izmantot tālāk minēto komandu:
$ npm instalēt elektronu -gPievienojiet šo rindiņu “pakotnes” sadaļai “skripti”.json ”fails, lai pabeigtu Electron iestatīšanu:
"start": "elektrons ."Izveidot galveno lietojumprogrammu
Atvērt “indeksu.js ”failu izvēlētajā teksta redaktorā un pievienojiet tam šādu kodu:
const lietotne, BrowserWindow = pieprasīt ('elektrons');funkcija createWindow ()
const logs = new BrowserWindow (
platums: 1600,
augstums: 900,
webPreferences:
nodeIntegrācija: taisnība
);
logs.loadFile ('indekss.html ');
lietotne.whenReady ().pēc tam (createWindow);
Atvērt indeksu.html ”savā iecienītajā teksta redaktorā un ievietojiet tajā šādu kodu:
Sveika pasaule !!
Javascript kods ir diezgan pašsaprotams. Pirmā līnija importē nepieciešamos Electron moduļus, kas nepieciešami, lai lietotne darbotos. Pēc tam jūs izveidojat jaunu atsevišķā pārlūkprogrammas logu, kas tiek piegādāts kopā ar Electron, un ielādējat indeksu.html ”tajā. Iezīmējums “rādītājā.html ”fails izveido jaunu rindkopu“ Hello World !!”Ietīts“
”Tagu. Tas ietver arī atsauces saiti uz “indeksu.css ”stila lapas fails, kas vēlāk izmantots rakstā.
Palaidiet savu elektronu lietojumprogrammu
Palaidiet zemāk esošo komandu, lai palaistu savu Electron lietotni:
Sākums: $ npmJa līdz šim esat pareizi izpildījis norādījumus, jums vajadzētu iegūt jaunu līdzīgu logu:
Atvērt indeksu.css ”failu un pievienojiet zemāk esošo kodu, lai mainītu“ Hello World !!”Virkne.
krāsa: sarkana;
Vēlreiz izpildiet šo komandu, lai redzētu CSS stilu, kas piemērots “Hello World !!”Virkne.
Sākums: $ npm
Tagad jums ir minimālais nepieciešamo failu kopums, lai palaistu pamata Electron lietojumprogrammu. Jums ir “indekss.js ”, lai rakstītu programmas loģiku,“ indekss.html ”HTML iezīmēšanas un“ index.css ”dažādu elementu veidošanai. Jums ir arī “pakete.json ”fails un“ node_modules ”mape ar nepieciešamajām atkarībām un moduļiem.
Iepakojuma elektronu lietošana
Lietojumprogrammas iepakošanai varat izmantot Electron Forge, kā to iesaka oficiālā Electron dokumentācija.
Lai projektam pievienotu Electron Forge, izpildiet zemāk esošo komandu:
$ npx @ electron-forge / cli @ jaunākais importsJums vajadzētu redzēt šādu izvadi:
✔ Sistēmas pārbaude✔ Inicializē Git repozitoriju
✔ Modificētas paketes rakstīšana.json fails
✔ Atkarību instalēšana
✔ Modificētas paketes rakstīšana.json fails
✔ Fiksēšana .gitignore
Mums ir UZMANĪJUMS pārveidot jūsu lietotni formātā, kuru saprot elektronu kalējs.
Paldies, ka izmantojāt "electron-forge"!!!
Pārskatīt “paketi.json ”failu un rediģējiet vai noņemiet ierakstus“ veidotāju ”sadaļās atbilstoši savām vajadzībām. Piemēram, ja nevēlaties izveidot “RPM” failu, noņemiet ierakstu, kas saistīts ar “RPM” pakotņu izveidi.
Lai izveidotu lietojumprogrammas pakotni, palaidiet šo komandu:
$ npm skrējiena markaJums vajadzētu iegūt kādu līdzīgu produkciju:
> helloworld @ 1.0.0 make / home / nit / HelloWorld> elektronu-kalumu izgatavošana
✔ Sistēmas pārbaude
✔ Forge Config atrisināšana
Mums ir jāiesaiņo jūsu pieteikums, pirms mēs to varam sagatavot
✔ Sagatavošanās arkas iesaiņošanas lietojumprogrammai: x64
✔ Vietējo atkarību sagatavošana
✔ Iepakojuma lietojumprogramma
Šādu mērķu sasniegšana: deb
✔ Veidošana mērķim: deb - Uz platformas: linux - Arhai: x64
Es rediģēju “paketi.json ”failu, lai izveidotu tikai“ DEB ”pakotni. Izveidotās pakotnes varat atrast mapē “out”, kas atrodas jūsu projekta direktorijā.
Secinājums
Electron ir lieliski piemērots, lai izveidotu starpplatformu lietojumprogrammas, kuru pamatā ir viena koda bāze ar nelielām OS specifiskām izmaiņām. Tam patiešām ir atsevišķi jautājumi, no kuriem vissvarīgākais ir resursu patēriņš. Tā kā viss tiek atveidots atsevišķā pārlūkprogrammā un ar katru Electron lietotni tiek palaists jauns pārlūka logs, šīs lietojumprogrammas var būt resursu ietilpīgas salīdzinājumā ar citām lietojumprogrammām, kurās tiek izmantoti vietējo OS specifisko lietojumprogrammu izstrādes rīku komplekti.