Principalele diferențe
Electron In continuare voi suna „electroni“.
Nu este nici un secret faptul că io.js înapoi în Node.js, care este acum reglementat de Linux Foundation. Faptul că io.js jucat ravagii cu NW.js, face semn creatorul său partea lui. Creatorii de electroni, de asemenea, nu sta deoparte, dar, din fericire, deja din nou pe Node.js și cu succes suport IT, în timp ce versiunile 12 și 13 NW.js se bazează încă pe io.js, și nu prima prospețime.
De fapt, nu toate diferențele de electroni din NW.js, există alte - mai tehnice. Lista completă poate fi găsită în documentația de proiect.
Principiul de funcționare
Principiul de funcționare al electronice se bazează pe două tipuri de procese:
Primul tip - procesul principal. care este responsabil pentru integrarea și interacțiunea cu GUI sistemul de operare. Conform acestui concept constă în integrarea Dock pe OS X, sau bara de activități Windows, precum și a minimiza la tava, modul ecran complet, și alte lumesc și piesele OS native. Un astfel de proces poate fi rulat o singură dată pentru aplicații de viață.
Al doilea tip - procesul de redare. responsabil pentru afișarea ferestrei browser-ului, în care, cu ajutorul unei linii magice poate fi deschisă pagina aplicației, sau orice altă pagină web. Astfel de procese pot fi arbitrare. Pentru crearea procesului de redare corespunde procesului principal.
Pentru a genera procesul de bază utilizează următoarea schemă de aplicare a nașterii:
- Electron package.json lectură și se uită la ea secțiunea principală. care definește fișierul principal al aplicației. Acest fișier mai târziu în acest articol voi numi „punctul de intrare.“
- Apoi, prelucrarea „punctul de intrare“ și a creat procesul de bază, care, la rândul său, dacă se dorește, dezvoltatorul se deschide orice pagină sau pagini, care este, creează o fereastră de browser. Și pentru a fi mai precis, se creează un proces sau procese de redare.
Dacă încercați să ilustreze grafic viața de aplicare este construit pe un sistem electronic, se va arăta în felul următor:
oportunitati Electron
Înainte de a începe să scrieți js-fișier, care va servi ca punct de intrare pentru toate aplicațiile care trebuie să se uite la API dezvoltator disponibil (set de module), care poate fi ulterior referit pe unitate fără a da descrierea acestuia.
Pentru articol compactitate am făcut o descriere disponibilă versiunea electronică a API 0.33.3 GIST separat.
Configurarea mediului
Nu trebuie să menționăm că pentru e aveți nevoie de Node.js și managerul de pachete NPM la cea mai nouă versiune. În plus, am recomanda pentru a instala pachetul de la nivel global de electroni precompilate. care se va descărca automat versiunea curentă de aplicații electronice și rulează fără a fi nevoie de pre-asamblare.
După ce pachetul de instalare se va descărca automat versiunea curentă stabilă a electronului. Acum, în scopul de a rula aplicația, aveți nevoie rula numai electronul de comandă. în directorul de proiect. Pentru automatizarea în continuare a procesului de proiectare, vă sugerez să adăugați această comandă la secțiunea script-uri din package.json:
Această intrare oferă posibilitatea de a iniția lansarea aplicației pe începe comanda NPM.
Apropo, puteți instala la nivel local, dar în acest caz, echipa de electroni. este transformat într-un set de caractere teribil și urât:
În plus față de electronului în sine, de asemenea, am recomandăm să instalați pachetul XO. care este un înveliș peste ESLint:
ESLint este cel mai avansat Linter js-cod, dezvoltat de Nicholas Zakasom.
Setarea WebStorm
WebStorm a casetei nu se completează în mod automat metoda propusă, și, în general, pentru a lucra cu electroni. Pentru a corecta această nedreptate trebuie să efectueze câteva operații simple.
Faceți clic pe butonul Descărcare și selectați primele pachete de canal stânga stub comunității dactilografiate. Apoi, se uită la lista lungă de intrare sundries GitHub-electron. selectați-l și faceți clic pe butonul de descărcare și instalare. Gata!
Pentru a căuta în listă, faceți clic pe orice element din listă și începeți să tastați cuvântul pe care îl interesează.
Prima aplicație
Primul pas la începutul dezvoltării oricărei aplicații Node.js este de a crea fișierul package.json. Puteți să-l creați în modul semi-automat folosind comanda NPM de inițializare. răspunzând la întrebări, sau manual, adăugând doar cele mai necesare:
Din moment ce nu am decis ce vom dezvolta pe parcursul întregii serii până la acea aplicație va avea numele aplicației.
Acum este momentul pentru a executa comanda este adăugat pentru a susține package.json js-lintersul XO:
Această comandă va adăuga automat în tot ceea ce package.json ai nevoie, și să instalați o copie locală a XO. Putem adăuga numai la script-ul de pornire provocare XO. a scris anterior js-cod înainte de a deschide aplicația, a fost întotdeauna curat și bine mirosea:
De asemenea, am adăugat și modificat unele reguli ale controalelor cod pentru a Linter potrivi cerințelor mele personale și a fost ușor de utilizat.
Este timpul pentru a crea unele-simplu fișierul HTML care va fi ulterior încărcate la pornire. Mi se pare nu este nimic mai bun decât pentru a afișa versiunea de Node.js, Electron și Chrome. Pentru aceasta ne întoarcem la modulul de proces. care a fost extins de electroni. Acum, în plus față de informații despre procesul actual, acesta poate oferi, de asemenea, informații cu privire la tipul de proces (principal sau face), versiunea Chrome și de electroni, precum și calea către executabil js-fișier.
fișier main.js este „punctul de intrare“ pentru întreaga aplicație. În ea vor fi create și prelucrate de evenimentele de sistem fereastră.
În primul rând, trebuie să vă conectați modulul de aplicație. responsabil pentru gestionarea ciclului de viață al aplicației și browser-fereastra. Creați o fereastră nouă de browser.
Când închideți toate ferestrele în cerere ar trebui să fie din ea. În OS X acest eveniment este comun pentru aplicații și bare de meniu, astfel încât aici există o condiție care aruncă această platformă.
După Electron complet inițializat vor deveni disponibile de control aplicație API. Aici este codul care creează o fereastră nouă dimensiune a browser-ului de 800 x 600 pixeli. Apoi, în fereastra este încărcat înainte de a crea html-fișier.
Este important de remarcat faptul că, chiar dacă nu descărcați de HTML fișiere, procesul de redare este încă de a fi lansat, astfel cum a fost creat anterior fereastra browser-ului.
La sfârșitul handler atârnă evenimente închise. care apare atunci când fereastra browser-ul este închis. După ce primiți acest eveniment, trebuie să ștergeți referința la fereastră și mai mult să nu-l folosească.
Apropo, nu se confunda evenimentul închis cu un eveniment ca el aproape. care este trimis atunci când fereastra este închisă, adică, înainte de a închide.
În general, evenimentele tematice în format electronic merită un articol separat, dar din cauza lene mea, oricine se poate referi la documentația. Permiteți-mi să spun doar că ciclul de viață de aplicare în evenimentele vor fi după cum urmează:
- va-finisaj-lansare
- gata
- browser-fereastră creat
- pagina-titlu actualizat
- închide
- înainte de a-am renuntat
- va renunt
- părăsi
- fereastra all-închis
- închis
Evenimente, evenimente, dar să ne întoarcem la cererea noastră - este timpul să-l rula, folosind începe NPM comanda.
Ca rezultat, avem o fereastră care afișează versiunea curentă a Node.js, Electron și Chrome. În plus, fereastra de aplicație are un meniu de servicii cu un mic set de elemente standard. Afacerea se numește, datorită faptului că, după construirea proiectului, după cum se va vedea mai târziu, dispare.
Distribuirea cererii
Spre deosebire de articole despre NW.js voi da materialul cel mai necesar imediat, în primul articol cititorilor cele mai active au avut deja ocazia de a începe învățarea instrumentul singur.
Pentru a construi aplicația propunem să utilizeze pachetul de electroni-ambalatorului. În primul rând, stabilit la nivel global:
În acest moment am face fără sarcini de programare, cum ar fi Grunt și Gulp. Suntem adulți? - Cred că da!
Acum, prin rularea NPM alerga construi veți obține o acumulare de aplicația în cadrul sistemului de operare Windows. În cazul în care, cu toate acestea, aveți nevoie de ansamblul sub toate cele trei platforme, comanda va arata ca:
După aplicarea ansamblului sub toate cele trei platforme vor fi create, destul de ciudat, cele cinci directoare:
Dar lucrul cel mai amuzant este că un complet asamblat „set“ cântărește doar niște 500MB demnă de milă.
În plus față de numele aplicației explicită și versiune a electronilor în echipă, puteți folosi datele din package.json. Creați două câmpuri care va conține numele aplicației și versiunea publicată, care va fi folosit pentru a colecta este necesară:
După aceea, echipa va fi variabile disponibile:
Desigur, nimeni nu interzice să utilizați câmpul de nume ca numele aplicației:
Ca rezultat, echipa poate lua forma de:
Din păcate, pe Windows, nu am reușit niciodată să facă electron-ambalator pentru a utiliza $ npm_package_ *. Dar, pe OS X funcționează bine.
Disponibil pentru argumente de utilizator:
- Platforma - platforma (toate sau win32 linux .. darwin)
- arc - biți (toate sau x64 IA32.)
- versiune - versiune a ansamblului electronic pentru
- toate - --platform echivalent = toate --arch = toate
- out - directorul în care ansamblul va fi plasat
- icon - pictograma aplicației (.icns și ICO)
- app-bundle-id - identificatorul de aplicație în fișierul .plist
- app-versiune - versiune a aplicației
- construi-versiune - versiune a construi aplicații pentru OS X
- cache - director, care va fi amplasat memoria cache a aplicației
- ajutor-bundle-id - identificatorul de aplicație pentru Assistant plist
- ignora - fișier de excludere din ansamblul
- prună - rula NPM prună --production comandă în aplicația
- suprascrie - suprascrie ansambluri deja existente
- ASAR - aplicatii de ambalare, în arhiva ASAR-source
- ASAR-despacheta - despacheta fișierele într-un director app.asar.unpacked
- semna - ID-ul de conectare codesign (OS X)
- versiune-string - taste pentru a construi (Windows). Lista de chei, consultați documentația pachetului
Pentru informații cu privire la modul de a adăuga pictograme care toate ar trebui să fie făcut înainte de distribuirea de aplicații și cum să creeze un instalator pentru asamblarea, voi discuta în partea finală a acestei serii.
Referințe
În mod tradițional, am lăsa un link care poate fi citit pentru a extinde orizonturile lor în acest articol. În limba rusă nu este nimic, așa cum am Electron într-un fel foarte popular.
Ponderea pe plata hosting sau cafea.
Cu cât este mai des beau cafea, cu atât mai mult am scrie articolul.