PhoneGap. Svarbiausi aspektai pasirenkant technologiją. UX (vartotojo patirtis); Skirtingų platformų palaikymas. PhoneGap. PhoneGap. PhoneGap.

励志师---★发布于2018/06/02 00:00

注脚

1.PhoneGap

2.Svarbiausi aspektai pasirenkant technologiją UX (vartotojo patirtis) Skirtingų platformų palaikymas

3.Cordova http://cordova.apache.org/ - Apache Platformos: Android Bada Blackberry FirefoxOS iOS Mac OS X QT Tizen Ubuntu WebOS Windows ( desktop ) Windows Phone 7 Windows Phone 8

4.Cordova Įskiepiai: Battery Status Camera Console Contacts Device Device Motion Device Orientation Dialogs Camera File Transfer Geolocation Globalization In-App Browser Media Media Capture Network Information Splashscreen Vibration

5.PhoneGap https://build.phonegap.com/apps

6.Instaliavimas Instaliuoti NodeJS http://nodejs.org/ Iš komandinės eilutės paleisti: C:\> npm install -g phonegap C:\> phonegap install android C:\> phonegap install wp7 (?) C:\> phonegap install ios

7.Lokaliam kompiliavimui Instaliuoti Eclipse Android platformai (lokaliam kompiliavimui) http://www.eclipse.org/downloads/ Instaliuoti Android SDK http://developer.android.com/sdk/index.html Instaliuoti ADT Plugin http://developer.android.com/sdk/installing/installing-adt.html Pasitikrinti ar į PATH įtrauktas JDK bin katalogas (lokaliam kompiliavimui) ...\ Androidndroid-sdk\platform-tools ...\ Androidndroid-sdk ools sukurti kintamajį JAVA_HOME

8.Aplikacijos sukūrimas Susikurti prisijungimą: https://build.phonegap.com/apps m99m Iš komandinės eilutės paleisti: C:\> phonegap create hello -n HelloWorld - i com.example.hello Redaguojame: www/ config.xml , pakeičiame ir pridedame < access origin ="*"/> < content src="http ://kazkas.zz.mu/jm1.html" /> Iš komandinės eilutės paleisti: C:\> phonegap remote build android ( PhoneGap build serveris) arba C:\> phonegap run android (lokaliai)

9.Alyternatyvus būdas sukurti aplikaciją Jeigu iš karto reikalingas palaikymas visoms platformoms: https://github.com/phonegap/phonegap/archive/master.zip Išpakuoti lib / windows-phone-8 / createTemplates.bat gauti zip failai perkeliami į My Documents /Visual Studio 2012/ Templates / ProjectTemplates /Visual C# Redaguojame: www/ config.xml , pakeičiame ir pridedame < access origin ="*"/> < content src="http ://kazkas.zz.mu/jm1.html" /> Iš komandinės eilutės paleisti: C:\> phonegap remote build android ( PhoneGap build serveris) arba C:\> phonegap run android (lokaliai)

10.Įskiepių pridėjimas Pvz.: geolokacija phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-geolocation.git Reikalingas GIT įskiepis http://git-scm.com/download/win

11.Projekto patalpinimas į Eclipse http://docs.phonegap.com/en/2.2.0/guide_getting-started_android_index.md.html

12.Paleidimas emuliatoriuje Windows Phone : C:\Program Files (x86)\Microsoft SDKs\Windows Phone 7.1\Tools\XAP Deployment Android : adb –e install [ apk file name ] Instaliuoja veikiančiame emuliatoriuje

13.iOS iOS sertifikatų instaliavimas https://build.phonegap.com/docs/config-signing-ios

14.PhoneGap emuliatorius http://emulate.phonegap.com

15.Cam (1) <!DOCTYPE html > < html > < head > < title > Capture Photo </ title > < script type="text / javascript " charset="utf-8" src="cordova.js "></ script > < script type="text / javascript " charset="utf-8" > var pictureSource ; // picture source var destinationType ; // sets the format of returned value // Wait for device API libraries to load document.addEventListener("deviceready",onDeviceReady,false ); // device APIs are available function onDeviceReady () { pictureSource=navigator.camera.PictureSourceType ; destinationType=navigator.camera.DestinationType ; }

16.Cam (2) // A button will call this function function capturePhoto () { navigator.camera.getPicture(onPhotoDataSuccess , onFail , { quality : 50, destinationType : destinationType.DATA_URL }); } // Take picture using device camera and retrieve image as base64- encoded string // A button will call this function function capturePhotoEdit () { navigator.camera.getPicture(onPhotoDataSuccess , onFail , { quality : 20, allowEdit : true , destinationType : destinationType.DATA_URL }); } // Take picture using device camera , allow edit , and retrieve image as base64- encoded string

17.Cam (3) // Called when a photo is successfully retrieved function onPhotoDataSuccess(imageData ) { var smallImage = document.getElementById(smallImage ); // Get image handle smallImage.style.display = block ; // Unhide image elements smallImage.src = " data:image /jpeg;base64," + imageData ; // Show the captured photo } // Called when a photo is successfully retrieved function onPhotoURISuccess(imageURI ) { var largeImage = document.getElementById(largeImage ); // Get image handle largeImage.style.display = block ; // Unhide image elements largeImage.src = imageURI ; // Show the captured photo }

18.Cam (4) // A button will call this function function getPhoto(source ) { navigator.camera.getPicture(onPhotoURISuccess , onFail , { quality : 50, destinationType : destinationType.FILE_URI , sourceType : source }); }// Retrieve image file location from specified source // Called if something bad happens . function onFail(message ) { alert(Failed because : + message ); } </ script > </ head >

19.Cam (5) < body > < button onclick="capturePhoto ();"> Capture Photo </ button > < br > < button onclick="capturePhotoEdit ();"> Capture Editable Photo </ button > < br > < button onclick="getPhoto(pictureSource.PHOTOLIBRARY );"> From Photo Library </ button >< br > < button onclick="getPhoto(pictureSource.SAVEDPHOTOALBUM );"> From Photo Album </ button >< br > < img style="display:none;width:60px;height:60px;" id="smallImage " src ="" /> < img style="display:none ;" id="largeImage " src ="" /> </ body > </ html >

user picture
  • 励志师---★
  • Apparently, this user prefers to keep an air of mystery about them.

相关Slides