Phenquestions
Ta članek bo zajemal vodnik o namestitvi Electrona in ustvarjanju preproste aplikacije "Hello World" Electron v Linuxu.
O Electronu
Electron je okvir za razvoj aplikacij, ki se uporablja za ustvarjanje namiznih aplikacij na več platformah z uporabo spletnih tehnologij v samostojnem spletnem brskalniku. Ponuja tudi API-je, specifične za operacijski sistem, in robusten sistem pakiranja za lažjo distribucijo aplikacij. Običajna aplikacija Electron zahteva tri stvari: Node.js runtime, samostojni brskalnik na osnovi Chromiuma, ki je opremljen z API-ji za Electron in OS.
Namestite Node.js
Node lahko namestite.js in »npm« upravitelj paketov z zagonom naslednjega ukaza v Ubuntuju:
$ sudo apt namestite nodejs npmTe pakete lahko namestite v druge distribucije Linuxa iz upravitelja paketov. Lahko pa prenesete tudi uradne binarne datoteke, ki so na voljo na Node.js spletno mesto.
Ustvari novo vozlišče.js Project
Ko namestite Node.js in “npm”, ustvarite nov projekt z imenom “HelloWorld” z zaporednim izvajanjem naslednjih ukazov:
$ mkdir HelloWorld$ cd HelloWorld
Nato zaženite terminal v imeniku »HelloWorld« in zaženite spodnji ukaz, da inicializirate nov paket:
$ npm initPojdite skozi interaktivni čarovnik v terminalu in po potrebi vnesite imena in vrednosti.
Počakajte, da se namestitev konča. Zdaj bi morali imeti paket.json «v imeniku» HelloWorld «. Ob "paketu.json ”v imeniku vašega projekta olajša konfiguriranje projektnih parametrov in naredi projekt prenosljiv za lažjo skupno rabo.
Paket.json ”mora imeti vnos, kot je ta:
"main": "indeks.js "»Kazalo.js ", kjer bi bila vsa logika vašega glavnega programa. Ustvarite lahko.js ",".html "in".css ”glede na vaše potrebe. Za namen programa »HelloWorld«, ki je razložen v tem priročniku, bo spodnji ukaz ustvaril tri zahtevane datoteke:
indeks $ touch.js indeks.indeks html.cssNamestite Electron
Electron lahko v svoj imenik projekta namestite tako, da zaženete spodnji ukaz:
$ npm namestite electron --save-devPočakajte, da se namestitev konča. Electron bo zdaj dodan vašemu projektu kot odvisnost in v imeniku vašega projekta bi morali videti mapo »node_modules«. Namestitev Electrona kot odvisnosti od projekta je priporočljiv način namestitve Electrona v skladu z uradno dokumentacijo Electron. Če pa želite v svoj sistem namestiti Electron globalno, lahko uporabite spodnji ukaz:
$ npm namestite electron -gV odsek “skripti” v “paketu” dodajte naslednjo vrstico.json ”za zaključek namestitve Electron:
"start": "elektron ."Ustvari glavno aplikacijo
Odprite indeks.js ”v urejevalniku besedil po vaši izbiri in mu dodajte naslednjo kodo:
const app, BrowserWindow = require ('electron');funkcija createWindow ()
const window = novo okno brskalnika (
širina: 1600,
višina: 900,
webPreferences:
nodeIntegration: true
);
okno.loadFile ('indeks.html ');
app.whenReady ().nato (createWindow);
Odprite indeks.html ”v svojem najljubšem urejevalniku besedil in vanj vstavite naslednjo kodo:
Pozdravljen, svet !!
Koda javascripta je precej razumljiva. Prva vrstica uvozi potrebne elektronske module, potrebne za delovanje aplikacije. Nato ustvarite novo okno samostojnega brskalnika, ki je priložen Electronu, in naložite indeks.html ”v njem. Oznaka v indeksu.html "ustvari nov odstavek" Hello World !!"Zavit v"
" oznaka. Vključuje tudi referenčno povezavo do indeksa.css ”, uporabljena kasneje v članku.
Zaženite aplikacijo Electron
Zaženite spodnji ukaz, da zaženete aplikacijo Electron:
$ npm startČe ste doslej pravilno upoštevali navodila, morate dobiti novo okno, podobno temu:
Odprite indeks.css «in dodajte spodnjo kodo, da spremenite barvo» Hello World !!" vrvica.
barva: rdeča;
Znova zaženite naslednji ukaz, da vidite, kako se slog CSS uporablja za »Hello World !!" vrvica.
$ npm start
Zdaj imate najmanj nabor potrebnih datotek za zagon osnovne aplikacije Electron. Imate indeks.js "za pisanje programske logike," indeks.html "za dodajanje oznak HTML in" indeksa.css «za oblikovanje različnih elementov. Imate tudi “paket.json «in mapo» node_modules «, ki vsebuje zahtevane odvisnosti in module.
Uporaba paketa Electron
Za pakiranje aplikacije lahko uporabite Electron Forge, kot priporoča uradna dokumentacija Electron.
Zaženite spodnji ukaz, da v svoj projekt dodate Electron Forge:
$ npx @ electron-forge / cli @ najnovejši uvozMorali bi videti nekaj takšnih rezultatov:
✔ Preverjanje vašega sistema✔ Inicializacija skladišča Git
✔ Pisanje spremenjenega paketa.json
✔ Namestitev odvisnosti
✔ Pisanje spremenjenega paketa.json
✔ Pritrditev .gitignore
POSKUSILI SMO, da pretvorimo vašo aplikacijo v obliko, ki jo razumemo v elektronski kovačnici.
Hvala, ker uporabljate "elektronsko kovanje"!!!
Pregled “paket.json «in uredite ali odstranite vnose iz razdelkov» izdelovalci «glede na vaše potrebe. Če na primer ne želite zgraditi datoteke "RPM", odstranite vnos, povezan z gradnjo paketov "RPM".
Za izdelavo programskega paketa zaženite naslednji ukaz:
$ npm run makeMorali bi dobiti nekaj podobnih rezultatov:
> helloworld @ 1.0.0 make / home / nit / HelloWorld> izdelava elektronov
✔ Preverjanje vašega sistema
✔ Razreševanje Forge Config
Preden bomo lahko oddali vašo prijavo
✔ Priprava na paketno prijavo za arch: x64
✔ Priprava izvornih odvisnosti
✔ Uporaba embalaže
Izdelava naslednjih ciljev: deb
✔ Izdelava za tarčo: deb - Na platformi: linux - Za arch: x64
Uredil sem "paket.json «za izdelavo samo paketa» DEB «. Vgrajene pakete najdete v mapi »out«, ki se nahaja v imeniku vašega projekta.
Zaključek
Electron je odličen za ustvarjanje aplikacij na več platformah, ki temeljijo na eni kodi z manjšimi spremembami, specifičnimi za OS. Ima nekaj lastnih vprašanj, najpomembnejše pa je poraba virov. Ker se vse upodablja v samostojnem brskalniku in se z vsako aplikacijo Electron zažene novo okno brskalnika, so te aplikacije v primerjavi z drugimi aplikacijami, ki uporabljajo izvorne pripomočke za razvoj aplikacij, specifične za OS, zelo zahtevne.
