- 快召唤伙伴们来围观吧
- 微博 QQ QQ空间 贴吧
- 文档嵌入链接
- 复制
- 微信扫一扫分享
- 已成功复制到剪贴板
phone_gap_sxfk2i
展开查看详情
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 Phone7.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 >