Phenquestions
Tämä artikkeli kattaa oppaan Electronin asentamisesta ja yksinkertaisen "Hello World" Electron -sovelluksen luomisesta Linuxiin.
Tietoja Electronista
Electron on sovelluskehityskehys, jota käytetään alustojen välisten työpöytäsovellusten luomiseen verkkotekniikoita käyttämällä erillisessä verkkoselaimessa. Se tarjoaa myös käyttöjärjestelmäkohtaiset sovellusliittymät ja vankan pakkausjärjestelmän sovellusten jakamisen helpottamiseksi. Tyypillinen Electron-sovellus vaatii kolme asiaa toimimaan: Solmu.js runtime, itsenäinen Chromium-pohjainen selain, joka tulee Electron- ja OS-spesifisten sovellusliittymien mukana.
Asenna solmu.js
Voit asentaa Solmun.js ja “npm” paketinhallinta suorittamalla seuraava komento Ubuntussa:
$ sudo apt asenna nodejs npmVoit asentaa nämä paketit muihin Linux-jakeluihin paketinhallinnasta. Vaihtoehtoisesti voit ladata viralliset binäärit, jotka ovat saatavilla Solmesta.js-verkkosivusto.
Luo uusi solmu.js projekti
Kun olet asentanut Noden.js ja “npm”, luo uusi projekti nimeltä “HelloWorld” suorittamalla seuraavat komennot peräkkäin:
$ mkdir HelloWorld$ cd HelloWorld
Käynnistä seuraavaksi terminaali “HelloWorld” -hakemistossa ja suorita alla oleva komento uuden paketin alustamiseksi:
$ npm initKäy ohjatun ohjatun toiminnon läpi päätelaitteessa ja kirjoita nimet ja arvot tarpeen mukaan.
Odota asennuksen päättymistä. Sinulla pitäisi nyt olla ”paketti.json ”-tiedosto“ HelloWorld ”-hakemistossa. "Paketti".json ”-tiedosto projektihakemistossasi helpottaa projektiparametrien määrittämistä ja tekee projektista kannettavan, jotta jakaminen on helpompaa.
Paketti.json ”-tiedostossa tulisi olla seuraava merkintä:
"main": "indeksi.js ""Indeksi.js ”on paikka, jossa kaikki pääohjelmasi logiikat sijaitsevat. Voit luoda lisää.js ”,“.html ”ja”.css ”-tiedostot tarpeidesi mukaan. Tässä oppaassa selitetyn “HelloWorld” -ohjelman tarkoituksiin alla oleva komento luo kolme vaadittua tiedostoa:
$ touch -hakemisto.js-indeksi.html-hakemisto.cssAsenna Electron
Voit asentaa Electronin projektihakemistoon suorittamalla alla olevan komennon:
$ npm asenna elektroni --save-devOdota asennuksen päättymistä. Elektroni lisätään nyt projektiisi riippuvuutena, ja sinun pitäisi nähdä kansio "solmu_moduulit" projektihakemistossasi. Electronin asentaminen projektikohtaisena riippuvuutena on suositeltava tapa asentaa Electron virallisen Electron-dokumentaation mukaan. Jos kuitenkin haluat asentaa Electronin maailmanlaajuisesti järjestelmään, voit käyttää alla mainittua komentoa:
$ npm asenna elektroni -gLisää seuraava rivi paketin “komentosarjat” -osioon.json ”-tiedosto elektronin asennuksen loppuun saattamiseksi:
"start": "elektroni ."Luo pääsovellus
Avaa hakemisto.js ”tiedosto valitsemassasi tekstieditorissa ja lisää siihen seuraava koodi:
const sovellus, BrowserWindow = vaatia ('elektroni');funktio createWindow ()
const ikkuna = new BrowserWindow (
leveys: 1600,
korkeus: 900,
webPreferences:
nodeIntegration: totta
);
ikkuna.loadFile ('indeksi.html ');
sovellus.kun valmis().sitten (createWindow);
Avaa hakemisto.html ”-tiedosto suosikkitekstieditorissasi ja aseta siihen seuraava koodi:
Hei maailma !!
Javascript-koodi on melko itsestään selvä. Ensimmäinen rivi tuo tarvittavat Electron-moduulit, jotta sovellus toimisi. Seuraavaksi luot uuden ikkunan Electronin mukana tulevasta erillisestä selaimesta ja lataat “hakemiston.html-tiedosto. Hakemiston merkintä.html-tiedosto luo uuden kappaleen “Hello World !!”Kääritty”
”-Tagi. Se sisältää myös viittauslinkin "hakemistoon.css ”-tyylitaulukotiedosto, jota käytetään myöhemmin artikkelissa.
Suorita Electron-sovellus
Käynnistä Electron-sovellus suorittamalla alla oleva komento:
$ npm alkuJos olet tähän mennessä noudattanut ohjeita oikein, sinun pitäisi saada uusi samanlainen ikkuna:
Avaa hakemisto.css ”-tiedosto ja lisää alla oleva koodi vaihtaaksesi“ Hello World !!”Merkkijono.
väri punainen;
Suorita seuraava komento uudelleen nähdäksesi CSS-tyylin sovellettuna "Hello World !!”Merkkijono.
$ npm alku
Sinulla on nyt vähimmäisjoukko vaadittuja tiedostoja perustason Electron-sovelluksen suorittamiseksi. Sinulla on “hakemisto.js ”kirjoittaa ohjelmalogiikkaa,“ hakemisto.html ”HTML-merkintöjen ja hakemistojen lisäämiseksi.css ”eri elementtien muotoiluun. Sinulla on myös paketti.json ”tiedosto ja” solmu_moduulit ”-kansio, joka sisältää vaaditut riippuvuudet ja moduulit.
Package Electron -sovellus
Voit pakata sovelluksesi Electron Forgen avulla virallisen Electron-asiakirjan suositusten mukaisesti.
Suorita alla oleva komento lisätäksesi Electron Forgen projektiisi:
$ npx @ electron-forge / cli @ viimeisin tuontiSinun pitäisi nähdä tällainen lähtö:
✔ Järjestelmän tarkistaminen✔ Alustetaan Git-arkisto
✔ Muokatun paketin kirjoittaminen.json-tiedosto
✔ Riippuvuuksien asentaminen
✔ Muokatun paketin kirjoittaminen.json-tiedosto
✔ Kiinnitys .gitignore
Olemme YRITTÄMÄT muuttaa sovelluksesi sähköformin ymmärtämään muotoon.
Kiitos "elektronisepän" käytöstä!!!
Tarkista ”paketti.json ”-tiedosto ja muokkaa tai poista merkintöjä“ valmistajat ”-osioista tarpeidesi mukaan. Jos esimerkiksi et halua rakentaa RPM-tiedostoa, poista RPM-pakettien rakentamiseen liittyvä merkintä.
Suorita seuraava komento rakentaaksesi sovelluspaketin:
$ npm juoksumerkkiSinun pitäisi saada samanlainen tuotos kuin tämä:
> helloworld @ 1.0.0 merkki / home / nit / HelloWorld> elektroni-forge-merkki
✔ Järjestelmän tarkistaminen
✔ Forge Config -ratkaisun ratkaiseminen
Meidän on pakattava hakemuksesi ennen kuin voimme tehdä sen
✔ Kaaren pakkaussovelluksen valmistelu: x64
✔ Natiivien riippuvuuksien valmistelu
✔ Pakkaussovellus
Seuraavien kohteiden tekeminen: deb
✔ Kohteen tekeminen: deb - Alustalla: linux - Kaarelle: x64
Muokkasin pakettia.json ”-tiedosto vain DEB-paketin rakentamiseen. Rakennetut paketit löytyvät projektihakemistosi "out" -kansiosta.
Johtopäätös
Electron on loistava luomaan alustojen välisiä sovelluksia, jotka perustuvat yhteen kooditietokantaan pienillä käyttöjärjestelmäkohtaisilla muutoksilla. Sillä on joitain omia kysymyksiä, joista tärkein on resurssien kulutus. Koska kaikki hahmotellaan erillisessä selaimessa ja jokaisen Electron-sovelluksen kanssa käynnistetään uusi selainikkuna, nämä sovellukset voivat olla resursseja kuluttavia verrattuna muihin sovelluksiin, jotka käyttävät käyttöjärjestelmäkohtaisia sovelluskehitystyökalupaketteja.
