Phenquestions
Tento článok sa bude venovať sprievodcovi inštaláciou Electron a vytvorením jednoduchej aplikácie „Hello World“ Electron v systéme Linux.
O spoločnosti Electron
Electron je rámec pre vývoj aplikácií používaný na vytváranie multiplatformových desktopových aplikácií pomocou webových technológií v samostatnom webovom prehliadači. Poskytuje tiež API špecifické pre operačný systém a robustný systém balenia pre ľahšiu distribúciu aplikácií. Typická aplikácia Electron vyžaduje na fungovanie tri veci: Node.js runtime, samostatný prehliadač založený na chróme, ktorý je dodávaný s API špecifickými pre Electron a OS.
Nainštalujte uzol.js
Môžete nainštalovať Node.Správca balíkov js a „npm“ spustením nasledujúceho príkazu v Ubuntu:
$ sudo apt nainštalovať nodejs npmTieto balíčky môžete inštalovať do iných distribúcií systému Linux zo správcu balíkov. Prípadne si stiahnite oficiálne binárne súbory dostupné na uzle.webová stránka js.
Vytvorte nový uzol.js projekt
Po nainštalovaní uzla.js a „npm“, vytvorte nový projekt s názvom „HelloWorld“ spustením nasledujúcich príkazov za sebou:
$ mkdir HelloWorld$ cd HelloWorld
Ďalej spustite terminál v adresári „HelloWorld“ a spustením príkazu nižšie inicializujte nový balík:
$ npm začPrejdite interaktívnym sprievodcom v termináli a podľa potreby zadajte názvy a hodnoty.
Počkajte na dokončenie inštalácie. Teraz by ste mali mať „balíček“.súbor JSON v adresári „HelloWorld“. Mať „balíček.Súbor json ”v adresári projektu uľahčuje konfiguráciu parametrov projektu a umožňuje prenosnosť projektu pre ľahšiu zdieľateľnosť.
Balík.Súbor json ”by mal mať takýto záznam:
"main": "index.js "„Register.js “je miesto, kde by bola umiestnená všetka logika vášho hlavného programu. Môžete vytvoriť ďalšie.js “,„.html “a„.css ”súbory podľa vašich potrieb. Pre účely programu „HelloWorld“, ktorý je vysvetlený v tejto príručke, vytvorí príkaz nižšie tri požadované súbory:
$ dotykový index.js index.html index.cssNainštalujte si Electron
Aplikáciu Electron môžete nainštalovať do adresára projektu spustením nasledujúceho príkazu:
$ npm inštalačný elektrón - save-devPočkajte na dokončenie inštalácie. Elektron bude teraz pridaný do vášho projektu ako závislosť a v adresári projektu by ste mali vidieť priečinok „node_modules“. Inštalácia Electron ako závislosti na projekte je odporúčaný spôsob inštalácie Electron podľa oficiálnej dokumentácie Electron. Ak však chcete do svojho systému nainštalovať Electron globálne, môžete použiť príkaz uvedený nižšie:
$ npm inštalácia elektrónu -gPridajte nasledujúci riadok do sekcie „skripty“ v „balíku“.súbor json ”na dokončenie nastavenia Electron:
"start": "elektrón .„Vytvorte hlavnú aplikáciu
Otvorte „index.js ”v textovom editore podľa vášho výberu a pridajte do neho nasledujúci kód:
const app, BrowserWindow = require ('elektrón');funkcia createWindow ()
konšt okno = nový BrowserWindow (
šírka: 1600,
výška: 900,
webPreferences:
nodeIntegration: true
);
okno.loadFile ('index.html ');
aplikácia.whenReady ().potom (createWindow);
Otvorte „index.html ”vo svojom obľúbenom textovom editore a vložte do neho nasledujúci kód:
Ahoj svet !!
Kód javascript je celkom samozrejmý. Prvý riadok importuje potrebné moduly Electron potrebné na fungovanie aplikácie. Ďalej vytvoríte nové okno samostatného prehliadača, ktorý je dodávaný s produktom Electron, a načítate index.html ”súbor v ňom. Značka v „indexe.html “vytvorí nový odsek„ Hello World !!„Zabalené do“
Značka “. Zahŕňa tiež referenčný odkaz na „index.css ”súbor štýlov použitý neskôr v článku.
Spustite svoju elektrónovú aplikáciu
Spustením nižšie uvedeného príkazu spustíte aplikáciu Electron:
$ npm štartAk ste doteraz postupovali správne, mali by ste dostať nové okno podobné tomuto:
Otvorte „index.css “a pridajte nižšie uvedený kód, aby ste zmenili farbu„ Hello World !!”Reťazec.
farba: červená;
Znova spustite nasledujúci príkaz a uvidíte štýl CSS aplikovaný na „Hello World !!”Reťazec.
$ npm štart
Teraz máte minimálnu minimálnu sadu požadovaných súborov na spustenie základnej aplikácie Electron. Máte „index.js “na zápis logiky programu,„ index.html “na pridanie značiek HTML a„ indexu “.css “pre úpravu rôznych prvkov. Máte aj „balíček.súbor json a priečinok „node_modules“ obsahujúci požadované závislosti a moduly.
Balík Aplikácia elektrónov
Na zabalenie svojej aplikácie môžete použiť Electron Forge, ako to odporúča oficiálna dokumentácia spoločnosti Electron.
Spustením príkazu nižšie pridajte do svojho projektu Electron Forge:
$ npx @ electron-forge / cli @ najnovší importMali by ste vidieť nejaký takýto výstup:
✔ Kontrola vášho systému✔ Inicializuje sa úložisko Git
✔ Písanie upraveného balíka.súbor JSON
✔ Inštalácia závislostí
✔ Písanie upraveného balíka.súbor JSON
✔ Oprava .gitignore
Pokúsili sme sa previesť vašu aplikáciu tak, aby bola vo formáte, ktorému rozumie elektronárska spoločnosť.
Ďakujeme, že ste použili „elektrónku“!!!
Skontrolovať „balík.json ”a upravte alebo odstráňte položky z sekcií„ tvorcovia “podľa svojich potrieb. Napríklad, ak nechcete vytvoriť súbor „RPM“, odstráňte záznam súvisiaci s vytváraním balíkov „RPM“.
Spustením nasledujúceho príkazu vytvorte balík aplikácie:
$ npm spustiť značkuMali by ste dostať nejaký výstup podobný tomuto:
> helloworld @ 1.0.0 make / home / nit / HelloWorld> výroba elektrónovej výkovky
✔ Kontrola vášho systému
✔ Riešenie Forge Config
Než vašu žiadosť stihneme, musíme ju zabaliť
✔ Príprava žiadosti o balík pre arch: x64
✔ Príprava natívnych závislostí
✔ Baliaca aplikácia
Tvorba týchto cieľov: deb
✔ Tvorba pre target: deb - Na platforme: linux - Pre arch: x64
Upravil som „balíček.súbor json ”na zostavenie iba balíka„ DEB “. Vytvorené balíčky nájdete v priečinku „out“ umiestnenom vo vašom adresári projektu.
Záver
Electron je vynikajúci na vytváranie aplikácií pre rôzne platformy založených na jednej základni kódov s malými zmenami špecifickými pre OS. Má svoje vlastné problémy, najdôležitejšou z nich je spotreba zdrojov. Pretože sa všetko vykresľuje v samostatnom prehliadači a s každou aplikáciou Electron sa spúšťa nové okno prehľadávača, môžu byť tieto aplikácie v porovnaní s inými aplikáciami náročné na zdroje v porovnaní s natívnymi súpravami nástrojov pre vývoj aplikácií špecifických pre OS.
