Šis vadovas išmokys jus sukurti hibridinę programą naudojant populiarią programų kūrimo platformą „PhoneGap“. Tai, ką mes padarysime, pavers jūsų svetainę įdiegiamu .apk („Android“ programos) failu, kurį galima įdiegti bet kuriame „Android“ telefone. Kai programa bus paleista, ji tiesiog atidarys jūsų svetainę „Android“ gimtojoje „WebView“ naršyklėje, tačiau ji bus rodoma kaip viso ekrano programa - jokios URL naršymo juostos ar kitos nuorodos, kad jūsų svetainė paprasčiausiai pateikiama naršyklėje.
Reikalavimai
Savo svetainę (norėdami sekti šį vadovą, galite tiesiog sukurti nemokamą „WordPress“ tinklaraštį)
„GitHub“ paskyra
„PhoneGap“ paskyra
„Notepad ++“ (arba panaši teksto redagavimo programinė įranga, galinti atpažinti kodą)
Nuotraukų redagavimo programinė įranga, skirta kurti programų piktogramas („Photoshop“, GIMP ir kt.)
Šifravimo kodai
Tai yra kodų šablonai, kuriuos galite naudoti šiame vadove - jie yra iš mano paties sukurtos programos, sukurtos naudojant „PhoneGap“, bet aš atėmiau jiems savo asmeninę informaciją. Nustačius šiuos duomenis nuo nulio su visais teisingais parametrais, man prireikė daugelio dienų trikčių šalinimo, todėl juos teikiu jūsų patogumui. Prašom!
> Konfigūruoti. XML
> Rodyklė.HTML
Pradžia
Sukurkite aplanką darbalaukyje ir pavadinkite jį „ www: ' be kabučių. Tai bus pagrindinis projekto katalogas, kuriame „PhoneGap“ kūrėjas tikisi rasti visus jūsų projekto failus. Dabar sukursime jūsų programos piktogramą.
Atidarykite nuotraukų redagavimo programinę įrangą ir sukurkite naują vaizdą .PNG formatu. Vaizdo nustatymai turėtų atrodyti taip:
Dabar galite nupiešti savo piktogramą, pavyzdžiui, aš tiesiog padarysiu mažą mygtuką:
Vaizdo dydis priklauso nuo jūsų asmeninio telefono ekrano, tačiau jei ketinate sukurti programą keliems įrenginiams, jūs, žinoma, padarysite kelis tos pačios piktogramos dydžius. Čia pateikiama naudojamų vaizdų dydžių lentelė:
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)
Nenoriu ilgai ilgai kalbėti apie ekrano dydžius ir DPI, tiesiog žinau, kad DPI beveik koreliuoja su ekrano skiriamąja geba. Telefonas, kuris naudoja 1080 × 1920 ekrano skiriamąją gebą, naudos 480 dpi, tačiau tai nenaudojama būtinai tiksliai koreliuoja su ekrano dydžiu. Telefonas gali turėti 5,2 colių arba 6 colių ekraną ir 1080 x 1920 raišką. Bet šis vadovas nėra apie išmaniųjų telefonų ekranus, todėl eikime toliau.
Parengę piktogramą, išsaugokite ją kaip icon.png ir perkelkite jį į savo www: aplanką. Tai taps numatytas programos piktogramą. Jei norite sukurti skirtingo dydžio piktogramas, kurios atitiks vartotojo ekrano skiriamąją gebą, išsaugotumėte piktogramą skirtingais dydžiais ir pavadinimais, pavyzdžiui, Icon144.png, Icon192.png, Icon96.png ir pan. Tada jūs redaguotumėte Config.xml failą, kad būtų galima nukreipti į kiekvieną atskirą piktogramą. Judėkime toliau.
Taigi dabar, kai turite savo programos piktogramą, jums reikia purslų vaizdo. Iš esmės tai yra įkėlimo ekranas, pvz., Ekrano fonas, kuris rodomas prieš įkeliant programą. „Splash“ vaizdo dydžiai veikia tuo pačiu principu kaip ir piktogramos, tačiau yra šiek tiek didesni. Štai lentelė:
- LDPI:
- Portretas: 200x320px
- Peizažas: 320x200px
- MDPI:
- Portretas: 320x480 piks
- Peizažas: 480x320px
- HDPI:
- Portretas: 480x800px
- Peizažas: 800x480 taškų
- XHDPI:
- Portretas: 720px1280px
- Peizažas: 1280x720px
- XXHDPI:
- Portretas: 960px1600px
- Peizažas: 1600x960px
- XXXHDPI:
- Portretas: 1280px1920px
- Peizažas: 1920x1280px
Taigi sukurkite purslų vaizdą savo prietaiso skiriamojoje geboje, išsaugokite jį kaip Splash.png tada perkelkite jį į savo projekto aplanką. Puiku, dabar turite savo programos piktogramą ir purslų vaizdą, pereikime prie konfigūracijos ir rodyklės failų nustatymo.
„Index.HTML“ ir „Config.XML“ paaiškinta
Failas „config.xml“ nustato kūrimo aplinką („Android“, „iPhone“, „Windows Phone“), piktogramų ir taškų vietas bei „Apache Cordova“ papildinius, kuriuos norite naudoti savo programoje.
Atidarykite šabloną, kurį pateikiau „Notepad ++“, ir viršuje pamatysite šias eilutes:
Atnaujinkite tuos laukus savo informacija, tačiau „nuostatų“ laukus palikite ramybėje. Likusi konfigūracijos failo dalis savaime suprantama, jei tik pažiūrėsite į reikšmes. Pavyzdžiui, pirmenybės pavadinimas = „viso ekrano režimas“ nurodo programai paleisti save kaip viso ekrano programą. Palikite viską ramybėje, išskyrus šią paskutinę reikšmę failo apačioje:
Pakeiskite jį į savo tikrąjį svetainės URL. Tai leis programos vartotojui visiškai naršyti jūsų svetainėje ir tik jūsų svetainėje - jie negali palikti jūsų svetainės naudodamiesi jūsų programa. Žinoma, programoje nebus URL naršymo juostos, tai net iš tikrųjų nerimauja, tačiau taip pat užtikrina, kad vartotojas galėtų pasiekti visus jūsų svetainės puslapius. * Po svetainės URL yra a pakaitos simbolis , kuris koduojant žargoną reiškia, kad jis priims viską, kas įrašyta vietoje * ženklo.
Žinoma, jei norite apriboti naudotoją tik tam tikrais savo svetainės puslapiais, pridėtumėte tokias atskiras vertes:
Pereikime prie Index.html failą, tai duona ir sviestas, kad programa iš tikrųjų veiktų. Atidarykite jį „Notepad ++“ viduje ir perjunkite dokumento kalbą į HTML. „Index.html“ iš esmės daro tai, kad „Android“ naršyklėje nurodoma, kaip rodyti jūsų svetainę - mano pateiktame šablone yra žymos, skirtos pašalinti URL naršymo juostą iš naršyklės, leisti telefono mygtukui „atgal“ išeiti iš programos ir paleisti programa bus rodoma paspaudus ekraną. Eilutė, kurią norėsite pakeisti, yra čia:
var url = ‘http://jūsų svetainė.com’
Programos kūrimas „PhoneGap Build“
Taigi prisijunkite prie „GitHub“ paskyros ir eikite į pagrindinį saugyklos puslapį. Po saugyklos pavadinimu spustelėkite „Įkelti failus“ ir vilkite savo projekto aplanką į failų medžio ekraną. Dabar apačioje įveskite įsipareigojimo pranešimą, pvz., „ pirmasis mano bandymas programoje “ . Galiausiai spustelėkite Įvykdyti pakeitimus.
Dabar eikite į „PhoneGap Build“ puslapį ir prisijunkite. Dabar kūrimo puslapyje spustelėkite mygtuką „Nauja programa“. Tai paprašys įvesti kelią į „GitHub“ saugyklą, todėl atlikite tai, tada spustelėkite „Ištraukti iš .git reposity“.
Dabar grįžkite į pagrindinį kūrimo puslapį, spustelėkite „Atnaujinti kodą“ ir „Traukite naujausią“.
Galiausiai spustelėkite „Sukurti“. Tai sukompiluos jūsų programą į .apk failą ir pateiks jums galimybę atsisiųsti .apk. Dabar galite atsisiųsti šį .apk failą į savo kompiuterį ir perkelti į telefoną, tada įdiekite jį iš ten. Arba galite naudoti telefoną, norėdami nuskaityti QR kodą kompiuterio ekrane, kad automatiškai įdiegtumėte .apk failą į „Android“ įrenginį.
Viskas! Dabar, norėdamas paaiškinti jums keletą svarbių dalykų:
- Tai buvo labai supaprastintas vadovas, kuris padėjo jums sukurti pagrindines hibridines programas. Žmonės paprastai nevynioja savo svetainių į gimtąją naršyklę ir perduoda ją kaip „Android“ programą „Google Play“ parduotuvėje. Bet dabar, kai žinote, kaip tai padaryti, galite pradėti skaityti „PhoneGap“ dokumentaciją, kaip pritaikyti programą ir pridėti jai daug skonio, kad, tikimės, galėtumėte sukurti tikrai naudingą programą.
- Antra, „Google Play“ draudžia tokį programų kūrimo metodą, kad būtų kuriamos nuorodų schemos programos tik pajamoms. Taigi negalite sukurti programos „Uždirbkite pinigų šiandien!“ atidaro svetainę, pilną skelbimų ir banko pajamų iš skelbimų. Būsite uždrausti „Google Play“ parduotuvėje.
