Építése elektron alkalmazások
A fő különbség
Electron Következő fogom hívni „elektronok”.
Nem titok, hogy io.js vissza a node.js, amely most szabályozza a Linux Foundation. Az a tény, hogy io.js nagy pusztítást végzett NW.js, és intett az alkotója az ő oldalára. Electron alkotók is, nem áll félre, de szerencsére már újra node.js és sikeresen támogatja azt, míg NW.js 12. és 13. változat továbbra is alapul io.js, és nem az első frissességét.
Tény, hogy ez nem minden különbséget az elektronok NW.js, vannak más - inkább technikai. A teljes lista megtalálható a projekt dokumentáció.
működési elve
A működési elve az elektronikus alapul kétféle folyamat:
Az első típus - a fő folyamat. amely felelős az integráció és interakció az operációs rendszer grafikus. E koncepció rejlik az integráció a Dock OS X, vagy a tálcán a Windows, valamint a Tálcára, teljes képernyős módban, és egyéb hétköznapi és a natív OS darab. Egy ilyen eljárás lehet futtatni csak egyszer életében alkalmazásokhoz.
A második típus - a renderelés folyamatát. felelős a kijelző a böngésző ablakot, amelyben a segítségével egy mágikus vonalat lehet megnyitott oldal a kérelem vagy bármely más weboldal. Az ilyen folyamatok önkényes lehet. Mert a teremtett a renderelő eljárás megfelel a fő folyamat.
Annak érdekében, hogy létrehoz az alapvető folyamat használja a következő rendszer alkalmazásának születés:
- Electron package.json olvasás és néztem fő rész. amely meghatározza a fő alkalmazási fájlt. Ez a fájl később ebben a cikkben fogom hívni „belépési pont.”
- Ezután a feldolgozó a „belépési pont”, és létrehozta az alapvető folyamat, ami viszont, ha szükséges, a fejlesztő megnyitja bármelyik lapra vagy lapokra, vagyis létrehoz egy böngésző ablakot. És pontosabban, hogy létrehoz egy eljárást vagy az érintett folyamatokat.
Ha megpróbálja grafikusan alkalmazásának illusztrálására élet épül egy elektronikus, akkor a következőképpen néz ki:
lehetőségeket Electron
Megkezdése előtt írásban js-fájl, amely szolgál majd a belépési pont minden alkalmazást, amely meg kell nézni a rendelkezésre álló fejlesztői API szett (modulok), amely később hivatkozni a készüléken anélkül, hogy a leírását.
Kompaktság cikket tettem egy leírást a rendelkezésre álló API elektronikus változatát 0.33.3 külön lényegi.
Beállítása a környezet
Nem kell említeni, hogy az e szüksége van node.js és NPM csomagkezelő a legújabb verzióra. Ezen kívül, azt ajánlom, hogy telepítse globálisan elektron-prebuilt csomagot. amely automatikusan letölti az aktuális verzió az elektronikus és az alkalmazások futtatásához nincs szükség előzetes összeszerelés.
A telepítés után a csomag automatikusan letölti az aktuális stabil verzió az elektron. Most, hogy az alkalmazás futtatásához, akkor csak a parancs futtatásához elektron. A projekt könyvtárban. További automatizálás, a tervezési folyamat, azt javaslom, hogy adjunk a parancs, hogy a szkriptek részt package.json:
Ez a bejegyzés megadja a lehetőséget, hogy kezdeményezze a dob az alkalmazás parancs NPM kezdet.
By the way, akkor helyben telepíthető, de ebben az esetben az elektron csapat. átalakul egy szörnyű és csúnya karakterkészlet:
Amellett, hogy az elektron is, én is ajánlom, hogy telepítse XO csomagot. amely a borítás alatt ESLint:
ESLint a legfejlettebb Linter js-kód által kifejlesztett Nicholas Zakasom.
Beállítás WebStorm
WebStorm a doboz nem jelenti automatikusan kiegészíti a javasolt módszer, és általában dolgozni Electron. Ennek kijavításához igazságtalanságot kell végezni egy pár egyszerű művelet.
Kattintson a Letöltés gombra, és válassza ki a bal felső csatorna csomagok géppel közösség csonkokat. Aztán nézte a hosszú listát egyebeket belépési GitHub-elektron. válassza ki, és kattintson a gombra letöltése és telepítése. Kész!
Keresni a listában, kattintson bármelyik eleme a listán, és kezdje el beírni a érdekli.
Az első alkalmazás
Az első lépés az elején a fejlődés minden node.js alkalmazások létrehozásához package.json fájlt. Akkor hozza létre a félautomata módban NPM init parancs. válaszol a kérdésekre, vagy manuálisan, hozzátéve, csak a legszükségesebb:
Mivel én még nem döntöttem, mi fogjuk fejleszteni az egész sorozatot, amíg az alkalmazás lesz a neve az alkalmazás.
Most van itt az ideje, hogy végre a parancsot adunk helyt package.json js-pamutlinters XO:
Ez a parancs automatikusan hozzáadni package.json, amire szükség van, és helyezzen be egy helyi másolatot a XO. Csak akkor tudjuk hozzá a feladathoz XO Start script. a korábban írt js-kód előtt nyissa meg az alkalmazás, hogy mindig tiszta és jól szaga:
Azt is hozzá, és megváltoztatta bizonyos szabályok a kód ellenőrzések Linter illeszkedjen a személyes igényei és könnyű volt használni.
Itt az ideje, hogy egyfajta egyszerű html fájlt, majd később betölthető induláskor. Számomra úgy tűnik, nincs is jobb, mint megjeleníteni a változat node.js, Electron és a Chrome. Ehhez viszont a modulnak. amely bővült Electron. Most, amellett, hogy információt a jelenlegi folyamat, akkor is tájékoztatást ad az eljárás típusa (fő- vagy render), Chrome-verzió és Electron, valamint az elérési utat a futtatható js-fájlt.
main.js fájl a „belépési pont” az egész alkalmazást. Az létre fog jönni és dolgozza fel az ablak rendszer eseményeket.
Először is, meg kell csatlakoztatni az alkalmazás modult. kezeléséért felelős életciklusát az alkalmazás és a böngésző-ablakot. Hozzon létre egy új böngésző ablakot.
Ha bezárja az összes ablakot az alkalmazás legyen belőle. Az OS X az esemény közös alkalmazások és menüsorok, ezért itt van egy feltétele, hogy dob ezen a platformon.
Miután Electron inicializálása lesz elérhető API kijuttatásvezérlő. Itt a kód, amely létrehoz egy új ablak mérete a böngésző 800 600 pixel. Majd az ablak betöltése előtt létrehoztuk html-fájlt.
Fontos megjegyezni, hogy még ha nem letölteni olyan html-fájlok, a renderelés is kell indítani, mint már korábban létrehozott böngészőablakban.
Végén a felvezető lóg zárt eseményeket. bukkan fel, ha a böngésző ablak zárva van. Miután megkapta ezt az eseményt, akkor törölni kell a hivatkozást az ablak és még nem használja azt.
By the way, ne keverje össze a rendezvény zárt egy esemény, mint magához. amelyet elküld, amikor az ablak zárva van, hogy van, mielőtt lezárták.
Általában a téma események elektronikus érdemel egy külön cikket, hanem azért, mert az én lustaság, bárki olvassa el a dokumentációt. Hadd mondjam el, hogy az alkalmazás-életciklus az események a következők lesznek:
- akarat-cél-elindítása
- kész
- böngésző ablak létre
- page-title-frissítve
- közel
- előtti Abbahagytam
- fog-kilép
- kilép
- ablak minden zárt
- zárva
Események, rendezvények, de térjünk vissza a kérelmet - itt az ideje, hogy futtatni, a NPM start parancsot.
Ennek eredményeként, van egy ablak, amely a jelenlegi változat node.js, Electron és a Chrome. Ezen kívül az alkalmazás ablak van egy üzemi menü egy kis sor szabványos terméket. Az üzleti hívják annak a ténynek köszönhető, hogy azután a projekt, mint később látni fogjuk, az eltűnik.
Szétosztása a kérelem
Ellentétben cikkek NW.js adom a legszükségesebb anyagi azonnal az első cikk a legaktívabb olvasók már volt lehetősége, hogy elsajátítania az eszköz magad.
Ki kell építeni az alkalmazás azt javasoljuk, hogy használja a csomagban elektron-csomagból. Először is, meg úgy globálisan:
Ekkor teszünk nélkül ütemezési feladatokat, mint Grunt és Culp. Mi vagyunk a felnőttek? - Azt hiszem, igen!
Most, a futás NPM távon épít kapsz egy épít az alkalmazás a Windows operációs rendszert. Ha azonban szüksége van a szerelvény alatt mindhárom platformon, a parancs így fog kinézni:
Alkalmazása után a szerelvény alatt mindhárom platformon jön létre, furcsa módon, az öt könyvtárak:
De a vicces az, hogy egy teljesen összeállított „set” súlya mindössze néhány szánalmas 500MB.
Amellett, hogy explicit alkalmazás nevét és verziószámát az elektronok a csapat, akkor az adatokat a package.json. Készítsen két mező, amely tartalmazni fogja a neve a közzétett alkalmazás nevét és verziószámát, amely felhasználható gyűjteni szükséges:
Ezt követően, a csapat lesz elérhető változók:
Természetesen, ha senki sem tiltja, hogy használja a név mező, mint a neve az alkalmazás:
Ennek eredményeként, a csapat vehet a következő formában:
Sajnos, a Windows, én soha nem volt képes arra, hogy elektron-csomagoló kezelhető $ npm_package_ *. De OS X már jól működik.
Elérhető felhasználó érvek:
- platform - a platform (összes vagy win32 linux darwin ..)
- arch - bit (összes vagy ia32 x64).
- verzió - változata az elektronikus egység számára
- összes - egyenértékű --platform = összes --arch = összes
- ki - a könyvtár, amelyben a szerelvény kerül
- ikon - az alkalmazás ikonja (.icns és .ico)
- app-csomag-id - az alkalmazás azonosítót a plist
- app-változat - verziója az adott alkalmazásnak
- beépíthető változat - verzió az alkalmazás épít OS X
- cache - könyvtár, amelyet található alkalmazás-gyorsítótár
- helper-bundle-id - az alkalmazás azonosítója plist Assistant
- ignore - fájlkizárási a szerelvény
- aszalt szilva - fut NPM szilvás --production parancsot az alkalmazás
- felülírása - felülírja a már meglévő egységek
- Asar - csomagolási alkalmazások Asar-forrás archívum
- Asar-kicsomagolni - csomagoljuk ki a fájlokat egy könyvtárban app.asar.unpacked
- aláírására - login ID codesign (OS X)
- verzió-karakterlánc - kulcsok építeni (Windows). A kulcsok listáját lásd a csomag dokumentációjában
Arról, hogy hogyan kell hozzáadni ikonok, hogy minden meg kell tenni, mielőtt az alkalmazás elosztó és hogyan lehet létrehozni egy telepítő összeszerelési, fogom fejteni az utolsó része ennek a sorozatnak.
Irodalom
Hagyományosan, hagyok egy linket, amely olvasható, hogy bővítsék látókörüket ebben a cikkben. Az orosz semmi, ahogy Electron valahogy nem túl népszerű.
Share on fizetési ellenséges vagy kávé.
Minél gyakrabban isznak kávét, annál én írom a cikket.