用PhoneGap+jQueryMobile開發(fā)Android應(yīng)用實(shí)例

1、用PhoneGap+jQueryMobile開發(fā)Android應(yīng)用前言2PhoneGap及jQueryMobile介紹2開發(fā)環(huán)境的搭建2下載并按照J(rèn)AVASDK2下載并安裝AndroidSDK.2創(chuàng)建虛擬設(shè)備3下載并安裝Eclipse4下載并安裝ADTPlugin4下載并解壓Cordova5下載jQueryMobile5第一個(gè)手機(jī)應(yīng)用5創(chuàng)建工程5整合Cordova8整合jQueryMobile10制作apk13參考資料161. 前言隨著移動(dòng)終端計(jì)算能力的提升，移動(dòng)應(yīng)用變得越來(lái)越受人青睞，也越來(lái)越流行；尤其以iOS和Android平臺(tái)為主的手機(jī)，已經(jīng)淘汰了大多數(shù)人的手機(jī)。新的平臺(tái)產(chǎn)生了新的SDK

2、新的UI,新的使用習(xí)慣和用戶體驗(yàn)。而因?yàn)橛?jì)算能力的增強(qiáng)，手機(jī)的渲染能力也大幅增強(qiáng)，從而催生了以WebKit為內(nèi)核的瀏覽器的廣泛應(yīng)用。并以此而衍生出了手機(jī)上的HTML+CSSS用。至此，手機(jī)應(yīng)用的開發(fā)也與傳統(tǒng)PC的開發(fā)一樣，多了一條低成本開發(fā)的坦途。除卻傳統(tǒng)的基于原生SDK的開發(fā)不談，基于HTML+CSS+js的開發(fā)已經(jīng)變得越來(lái)越流行，也越來(lái)越受歡迎，特別是一些小應(yīng)用開發(fā)商。因此而衍生的開發(fā)框架如雨后春筍：PhoneGap,AppCan,Rexsee等等。這些框架都是采用橋接的方式，在系統(tǒng)（iOS/Android）原生SDK的基礎(chǔ)上，創(chuàng)建一個(gè)以WebKit為運(yùn)行環(huán)境的本地Web應(yīng)用，并為js引擎

3、暴露本地功能（服務(wù)）的訪問(wèn)接口，從而實(shí)現(xiàn)以HTML+CS輾示界面，以js控制程序流程的手機(jī)應(yīng)用。這種應(yīng)用看上去與原生SDK開發(fā)的應(yīng)用并無(wú)二致，甚至可能擁有更好的用戶界面和用戶體驗(yàn)。因?yàn)榫W(wǎng)頁(yè)的開發(fā)技術(shù)越來(lái)越成熟，各種庫(kù)的適用性，兼容性越來(lái)越強(qiáng)，而且也越來(lái)越注重用戶界面與用戶體驗(yàn)的提升，其中的佼佼者有最初的Prototype,Yahoo!;現(xiàn)在大行其道的jQuery,ExtJs,Dojo等等。同樣，這些庫(kù)也推出了移動(dòng)版，而基于jQuery的就有很多不同的庫(kù)，如：JQ.mobi,jQueryMobile等等。2. PhoneGap、jQueryMobile簡(jiǎn)介PhoneGap是一個(gè)基于HTML5+C

4、SSJavaScript的，創(chuàng)建移動(dòng)跨平臺(tái)移動(dòng)應(yīng)用程序的快速開發(fā)平臺(tái)。最初PhoneGap僅支持iOS,但隨著Android市場(chǎng)份額的恐怖增長(zhǎng)，增加了Android的支持，后續(xù)又陸續(xù)增加了BlackBerry、WindowsMobilePhone、WebOS以及Symbian的支持。Adobe在去年底，收購(gòu)了PhoneGap,并交由Apache開源，成了現(xiàn)在的Cordova（以下均稱Cordova）。Cordova現(xiàn)在已經(jīng)更新到2.1.0,除了保留原PhoneGap的所有功能，Cordova支持更多的設(shè)備，橋接了更多的接口，并且穩(wěn)定性更高。jQueryMobile是jQuery在手機(jī)上和平板設(shè)

5、備上的版本。jQueryMobile不僅給主流移動(dòng)平臺(tái)帶來(lái)jQuery核心庫(kù)，而且發(fā)布了一個(gè)較完整統(tǒng)一的jQuery移動(dòng)UI框架。我們可以繼續(xù)使用jQuery來(lái)開發(fā)手機(jī)版的網(wǎng)頁(yè)代碼，同時(shí)還可以利用jQueryMobile帶來(lái)的基本UI控件（互聯(lián)網(wǎng)時(shí)代的程序猿是幸福滴）。3. 開發(fā)環(huán)境的搭建廢話了不少，現(xiàn)在來(lái)點(diǎn)正經(jīng)的，從無(wú)到有搭建一個(gè)開發(fā)環(huán)境：1）下載并安裝JAVAJDKf薦使用JDK6）2）下載并安裝AndroidSDK（r20.0.3）安裝好之后，打開SDKManager（初始安裝后，僅AndroidSDKTools一項(xiàng)已安裝），將Tools項(xiàng)，以及Android2.2（API8）勾選，并點(diǎn)

6、擊"installxpackages”進(jìn)行安裝（過(guò)程會(huì)有點(diǎn)長(zhǎng)，不如坐下來(lái)看一部電影吧）,如圖：3)創(chuàng)建虛擬設(shè)備(AndroidVirtualDevice)打開AVDManager,點(diǎn)擊新建(New),如圖:輸入虛擬設(shè)備名稱，選擇目標(biāo)平臺(tái)(Android2.2),如圖:CreatenewAndroidVirtualIDevice(AVD)4)下載并安裝Eclipse(Eclipse3.4+)5)下載并安裝ADTPlugin(20.0.3)ADTPlugin的安裝有兩種，一種在線安裝：打開Eclipse菜單Help|InstallNewSoftware，點(diǎn)Add,在Name中輸入“ADT

7、20.0.3",在Location里輸入https:dl-再有一種就是把ADT20.0.3.zip下載到本地，進(jìn)行本地安裝。不同之處就是在Add之后，在Location中輸入zip包的本地路徑即可。安裝好之后，Eclipse下會(huì)看到Android開發(fā)相關(guān)的工具按鈕，如圖:jJavaEE-MyFirstApp/assets/incFileEditRefactorRunNavigate6）下載并解壓CordovaCordova是一個(gè)zip包，不需要安裝，我們不妨將其解壓，并與AndroidSDK放一起。7）下載jQueryMobile與Cordova一樣，不妨將其解壓并與AndroidS

8、DK放一起（好找嘛）。4.第一個(gè)手機(jī)應(yīng)用開發(fā)環(huán)境至此已經(jīng)搭建完畢，練練手吧（可不可以不要"hello,Cordova.”）：SDK最好選一致的（為什么是2.2?）。這里是程序圖標(biāo)（回頭再來(lái)?yè)Q），以及配色方案（無(wú)所謂，我們用的HTML+CSS#）?？罩?，我們用不著。好了，終于結(jié)束了（我是說(shuō)截圖結(jié)束了，手酸吶）?，F(xiàn)在該整合Cordova了，先假設(shè)我們的YofangMobile工程目錄為%YofangMob%,而Cordova的解壓目錄下libandroidexample為30。丫2人門%(恩恩，我們是開發(fā)Android應(yīng)用嘛，當(dāng)然以此為準(zhǔn))，下面整合：1)切換到文件系統(tǒng)，復(fù)制Cordov

9、aAnd%libscordova-2.1.0.jar至U%YofangMob%libs下。2)創(chuàng)建文件夾YofangMob%assetswww。3) 復(fù)制CordovaAnd%assetswwwcordova-2.1.0.js至U%YofangMob%assetswww下。4) 復(fù)制文件夾%CordovaAnd%resxml到Y(jié)ofangMob%res下。5) 切換到Eclipse,打開我們的YofangMobile.java,將YofangMobile的基類由Activity改成DroidGap;將onCreate方法里的setContentView(R.layout.activity_yo

10、fang_mobile);替換成super.loadUrl("file:/android_asset/www/index.html");刪除onCreateOptionsMenu方法(修改之后Eclipse會(huì)報(bào)錯(cuò)，不怕不怕，Ctrl+Shift+O)。修改結(jié)果如圖：IYofangMcbile.java笈packagecniyofang.incbile;importorg.apache.cordova.DroidGap;importandroid,cs,Bundle;publicclassYofangtobileextendsDroidGap!51-Override:&

11、;publicvoidonCreate(BundlesavedlnstanceState)(super.onCreate(savedinstanceState);.super.loadUrl(*file:/android_as£etA*ww/index,html11);|)6) 繼續(xù)，打開AndroidManifest.xml文件(記得別雙擊，用OpenWith|TextEditor)。7) 增加Cordova屏幕支持：<supports-screensandroid:largeScreens="true"android:normalScreens=&quo

12、t;true"android:smallScreens="true"android:resizeable="true"android:anyDensity="true"/>8)增加Cordova插件配置：<uses-permissionandroid:name="android.permission.VIBRATE"/><uses-permissionandroid:name="android.permission.ACCESS_COARSE_LOCATION"

13、/><uses-permissionandroid:name="android.permission.ACCESS_FINE_LOCATION"/><uses-permissionandroid:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS"/><uses-permissionandroid:name="android.permission.READ_PHONE_STATE"/><uses-permissionandroi

14、d:name="android.permission.INTERNET"/><uses-permissionandroid:name="android.permission.RECEIVE_SMS”/><uses-permissionandroid:name="android.permission.RECORD_AUDIO"/><uses-permissionandroid:name="android.permission.MODIFY_AUDIO_SETTINGS"/><us

15、es-permissionandroid:name="android.permission.READ_CONTACTS"/><uses-permissionandroid:name="android.permission.WRITE_CONTACTS"/><uses-permissionandroid:name="android.permission.WRITE_EXTERNAL_STORAGE"/><uses-permissionandroid:name="android.permiss

16、ion.ACCESS_NETWORK_STATE"/><uses-permissionandroid:name="android.permission.GET_ACCOUNTS"/><uses-permissionandroid:name="android.permission.BROADCAST_STICKY"/>9) 為activity節(jié)點(diǎn)增加屬性：android:configChanges="orientation|keyboardHidden"10) 保存AndroidManifest.

17、xml的修改，如圖：|國(guó)indexhtmlAndroidManifestxmlS3manifestxmlns:android=1Bhttp:/schemas.android/com/apk/res/android”package=1lcn.yofang.mobile11android:ver5ionCode=1'l，"android:versionName=1B1.01'><supports-screensandroid:largeScreens="Btrue"android:n-ormaiScreens=a"true11an

18、droid:smaLlScreens=1Btrue11android:resizeable=1'true,iandroid:anyDensity=1'true11/><uses-permission<uses-permission<uses-permission<uses-permission<uses-permission<uses-permission<uses-permission<uses-permission<uses-permission<uses-permission<uses-permiss

19、ion<uses-permission<uses-permission<uses-permission<uses-permissionandroid:name="'androidpermission.VIBRATE"/>android:name="android.permission.ACCESS_OARSE_LOCATIONI11/>android:name=1Randroid國(guó)permission.ACCESS_FIME_LOCAT工ONT/>日ndroid:nmmE="dnd0idpEirmi55i

20、onJMZCE55lLOcMlON_EXTRA_COMMANDS"/>android:name=1Fandroid.permission.READ_PHONIE_STATE"/>android:name="，android國(guó)permission.INTERNET"/>android:name="'androidpermission.RECEIVE_SMS,B/>android:name=1Fandroid.permission.RECORD_AUDIO11/>android:name=1Randroid.p

21、ermisaion.MODIFY_AUDIO_SETTINIGS1*/>android:name="'androidpermission.READ_CONfrACTS11/>android:name="'android.permission.WRITE_CONfTACTS11/>android:name="Fandroid國(guó)permission.WRITE_EXTERN0L_STORA<5E11/>android:name="Fandroidpermission.ACCESS_NIETWORK_STATE,B

22、/>android:name="'android.permission.6ET_ACCOUNITS11/>android:name=°android.permisaion.BROADCA5T_STICKY"/><uses-Xandroid:min5dkVersion="S11android:targetSdkVersion=',L51F/><applicationandroid:icon=',®jj(jic_launcher,randroid:label=1p5tring/app_na

23、me,iandroid:theme=lpstyle/AppTheme”><activity|android:configChanges=1"orientation|keyboardHIidden1'android:name="B.Yotaandroid:label=,Bstring/title_activity_yofang_mcibile1B>11)在assetswww下創(chuàng)建文件index.html,內(nèi)容如下：<!DOCTYPEHTML><html><head><title>Cordova</

24、title><scripttype="text/javascript"charset="utf-8"src="cordova-2.1.0.js"></script></head><body><h1>Hello,Cordova.</h1></body></html>12)RunAs|AndroidApplication,看看整合的成績(jī)吧(啟動(dòng)AVD時(shí)會(huì)有點(diǎn)慢，先喝口茶)。Cordova整合完成，接下來(lái)我們把jQueryMobile也給整

25、進(jìn)去，同理，先假定jQueryMobile解壓目錄下demos為jQueryMob%:1) 切換到文件系統(tǒng)，復(fù)制文件夾%jQueryMob%css到Y(jié)ofangMob%assetswww下。2) 復(fù)制文件夾%jQueryMob%js到Y(jié)ofangMob%assetswww下。3) 復(fù)制文件夾%jQueryMob%docs_assets到Y(jié)ofangMob%assetswww下。4) 復(fù)制jQueryMob%index.html至U%YofangMob%assetswww下。5) 移動(dòng)YofangMob%assetswwwcordova-2.1.0.js至U%YofangMob%assetsww

26、wjs下。6) 切換到Eclipse,打開index.html,修改文件內(nèi)容：<!DOCTYPEhtml><html><head><metacharset="utf-8"><metaname="viewport"content="width=device-width,initial-scale=1"><title>jQueryMobile:DemosandDocumentation</title><linkrel="stylesheet

27、"href="css/themes/default/jquery.mobile-1.2.0.css"/><linkrel="stylesheet"href="_assets/css/jqm-docs.css"/><scripttype="text/javascript"src="js/jquery.js"></script><scripttype="text/javascript"src="js/jquery

28、.mobile-1.2.0.js"></script><scripttype="text/javascript"src="_assets/js/jqm-docs.js"></script>scripttype="text/javascript"src="js/cordova-2.1.0.js"></script><scripttype="text/javascript">document.addEventListe

29、ner("deviceready",function()$("#platform").html(device.platform);$("#version").html(device.version);$("#uuid").html(device.uuid);$("#name").html();$("#width").html(screen.width);$("#height").html(screen.height);$("

30、#colorDepth").html(screen.colorDepth);$("#location").click(function()navigator.geolocation.getCurrentPosition(function(p)varurl="alert("查詢失敗："+err.message);););,false);</script></head><body><divdata-role="page"class="type-home"&g

31、t;<divdata-role="content"><pclass="jqm-version"></p><divclass="content-secondary"><divid="jqm-homeheader"><h1id="jqm-logo"><imgsrc="_assets/images/jquery-logo.png"alt="jQueryMobileFramework"/

32、></h1><p>ATouch-OptimizedUIFrameworkbuiltwithjQueryandHTML5.</p></div><divclass="intro"><h4>Platform:<spanid="platform">&nbsp;</span>,Version:<spanid="version">&nbsp;</span></h4><h4>UUID:

33、<spanid="uuid">&nbsp;</span>,Name:<spanid="name">&nbsp;</span></h4><h4>Width:<spanid="width">&nbsp;</span>,Height:<spanid="height">&nbsp;</span>,ColorDepth:<spanid="colorDepth&

34、quot;></span></h4></div><uldata-role="listview"data-inset="true"data-theme="c"data-dividertheme="f"><lidata-role="list-divider">Overview</li><li><ahref="javascript:location.self;"id="loca

35、tion"data-role="button"data-inline="true">地理位置</a></li></ul></div><!-/content-primary-></div><divdata-role="footer"class="footer-docs"data-theme="c"><pclass="jqm-version"></p><

36、;p>&copy;2012jQueryFoundationandothercontributors</p></div></div></body></html>7) 保存修改，RunAs|AndroidApplication。至此，我們已經(jīng)可以在虛擬機(jī)中看到程序的運(yùn)行效果了?？梢皂樌墨@取設(shè)備信息，并且根據(jù)虛擬機(jī)的設(shè)置不同，還能獲得一個(gè)國(guó)外的地理位置（哈哈，出國(guó)了）。結(jié)束了嗎？不，程序甚至都還沒(méi)用在我們自己的手機(jī)上運(yùn)行過(guò)應(yīng)該把程序制作成apk安裝包對(duì)不對(duì)？然后安裝到手機(jī)上，,怎么能結(jié)束?OoOWArticleHuntergaiay-frameii七！giaiay-friarnev口左:!laobingcyMyFirstAppUdServers與yo-fangSh：ljtSYefangMobi臥genGtn>Android:Androidllibsre-sAndroidNicjunchpr&guarcproiect.piinNe