Šī rokasgrāmata iemācīs jums izveidot hibrīdu lietotni, izmantojot populāru lietotņu veidošanas platformu PhoneGap. Mēs darīsim jūsu vietni par instalējamu .apk (Android lietojumprogramma) failu, kuru var instalēt jebkurā Android tālrunī. Kad lietotne tiek palaista, tā vienkārši atvērs jūsu vietni Android vietējā WebView pārlūkprogrammā, taču tā tiks parādīta kā pilnekrāna lietotne - nav URL navigācijas joslas vai citas norādes, ka jūsu vietne tiek vienkārši parādīta pārlūkprogrammā.
Prasības
Jūsu vietne (lai sekotu šai rokasgrāmatai, jūs varētu vienkārši izveidot bezmaksas WordPress emuāru)
GitHub konts
PhoneGap konts
Notepad ++ (vai līdzīga teksta rediģēšanas programmatūra, kas var atpazīt kodu)
Fotoattēlu rediģēšanas programmatūra lietotņu ikonu izveidei (Photoshop, GIMP utt.)
Kodēšanas veidnes
Šīs ir kodu veidnes, kuras varat izmantot šīs rokasgrāmatas vajadzībām - tās ir no manas pašas lietotnes, kas izstrādāta kopā ar PhoneGap, taču es viņiem esmu atņēmis personisko informāciju. To iestatīšana no nulles ar visiem pareizajiem parametriem prasīja daudzu dienu problēmu novēršanu, tāpēc es tos sniedzu jūsu ērtībai. Nav par ko!
> Config.XML
> Indekss.HTML
Darba sākšana
Izveidojiet mapi darbvirsmā un izsauciet to “ www: ' bez pēdiņām. Šis būs projekta galvenais direktorijs, kurā PhoneGap veidotājs sagaida, ka atradīs visus jūsu projekta failus. Tagad mēs izveidosim jūsu lietotnes ikonu.
Atveriet savu fotoattēlu rediģēšanas programmatūru un izveidojiet jaunu attēlu .PNG formātā. Attēla iestatījumiem vajadzētu izskatīties šādi:
Un tagad jūs varat uzzīmēt savu ikonu, piemēram, es tikai izveidoju mazu pogu:
Attēla lielums ir atkarīgs no jūsu personīgā tālruņa ekrāna, taču, ja jūs plānojat izstrādāt lietotni vairākām ierīcēm, jūs, protams, izgatavosiet vairākus vienas ikonas izmērus. Šeit ir izmantoto attēlu izmēru tabula:
36 × 36 (120 dpi / LDPI)
48 × 48 (160 dpi / MDPI)
72 × 72 (240 dpi / HDPI)
96 × 96 (320 dpi / XHDPI)
144 × 144 (480 dpi / XXHDPI)
192 × 192 (640 dpi / XXXHDPI)
Es nevēlos tērēt pārāk ilgi, runājot par ekrāna izmēriem un DPI, tikai zinu, ka DPI diezgan lielā mērā korelē ar ekrāna izšķirtspēju. Tālrunis, kas izmanto ekrāna izšķirtspēju 1080 × 1920, izmantos 480 dpi, taču tas netiek izmantots obligāti precīzi korelē ar ekrāna izmēru. Tālrunim var būt 5,2 collu vai 6 collu ekrāns, un tā izšķirtspēja ir 1080 × 1920. Bet šī rokasgrāmata nav par viedtālruņu ekrāniem, tāpēc ejam tālāk.
Pēc ikonas sastādīšanas saglabājiet to kā icon.png un pārvietojiet to mapē www: www. Tas kļūs par noklusējums jūsu lietotnes ikona. Ja vēlaties izveidot dažāda lieluma ikonas, kas atbilst lietotāja ekrāna izšķirtspējai, jūs ikonu saglabājat dažādos izmēros un nosaukumos, piemēram, Icon144.png, Icon192.png, Icon96.png utt. Tad jūs rediģētu Config.xml failu, lai norādītu uz katru atsevišķo ikonu. Pārejam tālāk.
Tāpēc tagad, kad jūsu lietotnei ir ikona, jums ir nepieciešams attēls. Tas būtībā ir ielādes ekrāns, piemēram, fona attēls, kas tiek parādīts pirms jūsu lietotnes ielādes. Izšļakstīto attēlu izmēri darbojas pēc tāda paša principa kā ikonas, bet ir nedaudz lielāki. Šeit ir tabula:
- LDPI:
- Portrets: 200x320px
- Ainava: 320x200 pikseļi
- MDPI:
- Portrets: 320x480 pikseļi
- Ainava: 480x320px
- HDPI:
- Portrets: 480x800 pikseļi
- Ainava: 800x480 pikseļi
- XHDPI:
- Portrets: 720px1280px
- Ainava: 1280x720px
- XXHDPI:
- Portrets: 960px1600px
- Ainava: 1600x960px
- XXXHDPI:
- Portrets: 1280px1920px
- Ainava: 1920x1280px
Tāpēc izveidojiet savu splash attēlu ierīces izšķirtspējā, saglabājiet to kā Splash.png un pēc tam pārvietojiet to projekta mapē. Lieliski, tagad jums ir jūsu lietotnes ikona un uzšļakstītais attēls. Sāksim iestatīšanas un indeksēšanas failu iestatīšanu.
Index.HTML un Config.XML paskaidrots
Fails config.xml ir tas, kas nosaka veidošanas vidi (Android, iPhone, Windows Phone), ikonu un uzšļakstīšanās vietas, kā arī Apache Cordova spraudņus, kurus vēlaties izmantot savā lietotnē.
Atveriet veidni, kuru norādīju Notepad ++, un augšpusē redzēsiet šīs rindas:
Atjauniniet šos laukus ar savu informāciju, bet laukus “preferences” atstājiet mierā. Pārējais konfigurācijas fails ir pats par sevi saprotams, ja paskatās tikai uz vērtībām. Piemēram, preferences nosaukums = “fullscreen” liek lietotnei palaist sevi kā pilnekrāna lietotni. Atstājiet visu mierā, izņemot šo pēdējo vērtību faila apakšdaļā:
Mainiet to uz faktisko vietnes URL. Tas ļaus lietotnes lietotājam pilnībā pārvietoties jūsu vietnē un tikai jūsu vietnē - viņi nevar pamest jūsu vietni, izmantojot jūsu lietotni. Protams, lietotnei nebūs URL navigācijas joslas, tas pat īsti neuztraucas, bet arī nodrošina, ka lietotājs var piekļūt visām jūsu vietnes lapām. * Pēc vietnes URL ir a aizstājējzīme , kas kodēšanas žargonā nozīmē, ka tas pieņems visu, kas ievadīts * zīmes vietā.
Protams, ja vēlaties ierobežot lietotāju tikai ar noteiktām jūsu vietnes lapām, pievienojiet atsevišķas vērtības, piemēram:
Pārejam pie Index.html fails, tā ir maize un sviests, lai lietotne faktiski darbotos. Atveriet to Notepad ++ iekšpusē un pārslēdziet dokumenta valodu uz HTML. Tas, ko index.html būtībā dara, ir pateikt Android pārlūkam, kā parādīt jūsu vietni - manis sniegtajā veidnē ir tagi, lai noņemtu URL navigācijas joslu no pārlūka, ļautu tālruņa pogai “Atpakaļ” iziet no lietotnes un palaist lietotne pēc uzšļakstīšanās ekrāna parādīšanās. Līnija, kuru vēlaties mainīt, ir šeit:
var url = ‘http://jūsu vietne.com’
Lietotnes izveide programmā PhoneGap Build
Tāpēc piesakieties savā GitHub kontā un dodieties uz krātuves galveno lapu. Zem krātuves nosaukuma noklikšķiniet uz “Augšupielādēt failus” un velciet projekta mapi failu koku ekrānā. Tagad apakšdaļā ierakstiet saistības ziņojumu, piemēram, “ mans pirmais lietotnes mēģinājums ” . Visbeidzot noklikšķiniet uz Veikt izmaiņas.
Tagad dodieties uz PhoneGap Build lapu un pierakstieties. Tagad būvēšanas lapā noklikšķiniet uz pogas “Jauna lietotne”. Tas prasīs ievadīt ceļu uz savu GitHub krātuvi, tāpēc dariet to un pēc tam noklikšķiniet uz “Izvelciet no .git reposity”.
Tagad atgriezieties galvenajā būvēšanas lapā, noklikšķiniet uz “Atjaunināt kodu” un “Pull latest”.
Visbeidzot, noklikšķiniet uz “Veidot”. Tas apkopos jūsu lietotni .apk failā un pēc tam piedāvās iespēju lejupielādēt .apk. Tagad šo .apk failu varat lejupielādēt savā datorā un pārsūtīt uz tālruni, pēc tam to instalēt no turienes. Varat arī izmantot tālruni, lai skenētu QR kodu datora ekrānā, lai automātiski instalētu .apk failu savā Android ierīcē.
Tieši tā! Tagad, lai paskaidrotu jums dažas svarīgas lietas:
- Šī bija ļoti vienkāršota rokasgrāmata, kas iepazīstināja jūs ar visvienkāršāko hibrīdprogrammu izveidi. Cilvēki parasti neapiet savas vietnes vietējā pārlūkprogrammā un nenodod to kā Android lietotni Google Play veikalā. Bet tagad, kad jūs zināt, kā to izdarīt, varat sākt lasīt PhoneGap dokumentāciju par to, kā pielāgot savu lietotni un pievienot tai daudz garšas, lai, cerams, varētu izveidot patiešām noderīgu lietotni.
- Otrkārt, Google Play aizliedz šāda veida lietotņu veidošanas metodi, lai izveidotu saišu shēmas lietotnes tikai ar ieņēmumiem. Tātad jūs nevarat izveidot lietotni ar nosaukumu “Nopelniet naudu šodien!” ar kuru tiek atvērta vietne, kas ir absolūti pilna ar reklāmām un ieņēmumiem no reklāmas. Jūs saņemsiet aizliegumu Google Play veikalā.
