經過了一段時間的學習，初步了解了該如何使用jQuery Mobile和 Phone Gap來開發一個Android應用程序，也想把這些東西介紹給大家。
1、 軟件准備
要進行android app的開發，當然需要准備Java, eclipse和安裝Android SDK，這個部分網絡上面很多方法，搜索“安裝Android SDK”即可找到很多答案，所以就不再這里浪費口水。
2、 知識准備
（1）了解jQuery Mobile這個js框架，知道怎么組織一個簡單的頁面。
官方網站：http://jquerymobile.com/（記得下載一個js庫文件）
（2）了解Phone Gap，怎么利用Phone Gap在后面的內容也有介紹。
官方網站：http://phonegap.com/（同樣記得下載相關文件）
（3）能夠使用jQuery進行開發。
3、 組織工程目錄
（1）打開Eclipse，建立一個android應用工程，見下圖
（2）解壓phonegap的壓縮包，可以看到它針對不懂的應用類型進行了不同的分類，有android、IOS、Windows Phone等移動終端系統，打開其中的android文件夾。
（3）在剛才新建的工程的根目錄下新建一個名為libs的文件夾，找到（1）中android文件夾中的jar包粘貼到剛才的libs文件夾下。
（4）將（1）中android文件夾下的xml文件夾整個粘貼到工程更目錄下的res文件夾下。
（5）在工程的assets文件夾下新建文件夾www，這個文件夾其實可以看作是phonegap的工程目錄，用來放js或者html文件。
（6）在文件夾www下面新建一個js文件夾，用來放置js和css文件；新建文件夾pages用來放置html文件。（新建html和引入js庫可以參照圖操作）
工程目錄如下圖：
4 Conding
（１）首先打開src下的Java類，修改繼承類為DroidGap（如果找不到這個類，估計是忘記將PhoneGap的jar包加入工程的Libraries），並且修改代碼，如下圖
（2）打開index.html文件，進行編輯，記得開頭要用html5的doctype聲明。我在里面加入兩個簡單的jQuery Mobile的頁面，並且調用了簡單的Phone Gap的API：
http://docs.phonegap.com/en/1.3.0/phonegap_notification_notification.md.html#notification.vibrate
代碼如下：
<!Doctype html> <html> <head> <title>Phone Gap Introduce</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <link rel="stylesheet" type="text/css" href="../JS/jquery.mobile-1.0rc1.min.css"/> <script type="text/javascript" src="../JS/jquery_1_6_4.js"></script> <script type="text/javascript" src="../JS/phonegap-1.2.0.js"></script> <script type="text/javascript" src="../JS/jquery.mobile-1.0rc1.js"></script> <script type="text/javascript"> $('#PageOne').live('pageinit', function(event){ var showTip = function(){ navigator.notification.alert("this is a message from page one!", null, "Message", "Close"); $(this).die("click"); }; var confirm = function(){ navigator.notification.confirm( 'You are the winner!', // message null, // callback to invoke with index of button pressed 'Game Over', // title 'Restart,Exit' // buttonLabels ); $(this).die("click"); }; var redirectPage = function(){ $.mobile.changePage("#PageTwo"); $(this).die("click"); }; $(event.target).find('#alert').bind('click', showTip); $(event.target).find('#confirm').bind('click', confirm); $(event.target).find('#changePage').bind('click', redirectPage); }); $('#PageTwo').live('pageshow', function(event){ var showTip = function(){ navigator.notification.alert("this is a message from page two!", null, "Message", "Close"); $(this).die("click"); }; var confirm = function(){ navigator.notification.confirm( 'You are the losser!', // message null, // callback to invoke with index of button pressed 'Game Over', // title 'Restart,Exit' // buttonLabels ); $(this).die("click"); }; $(event.target).find('#alert').bind('click', showTip); $(event.target).find('#confirm').bind('click', confirm); }); </script> </head> <body> <div id="PageOne" data-role="page"> <div data-role="header" data-backbtn="false"> <h1>Phone Gap One</h1> </div> <div data-role="content"> <div> <a href="#" id="alert" data-role="button" data-theme="b">Alert</a> </div> <div> <a href="#" id="confirm" data-role="button" data-theme="b">Confirm</a> </div> <div> <a href="#" id="changePage" data-role="button" data-theme="b">Change Page</a> </div> </div> <div data-role="footer"> <div data-role="navbar"> <ul> <li><a href="#PageOne">Page One</a></li> <li><a href="#PageTwo">Page Two</a></li> </ul> </div> </div> </div> <div id="PageTwo" data-role="page"> <div data-role="header" data-backbtn="true"> <h1>Phone Gap Two</h1> <a data-role="button" data-rel="back">Previous</a> </div> <div data-role="content"> <div> <a href="#" id="alert" data-role="button" data-theme="b">Alert</a> </div> <div> <a href="#" id="confirm" data-role="button" data-theme="b">Confirm</a> </div> <div> <a href="file:///android_asset/www/Pages/pageThree.html" data-role="button" data-theme="b">Page Three</a> </div> </div> <div data-role="footer"> <div data-role="navbar"> <ul> <li><a href="#PageOne">Page One</a></li> <li><a href="#PageTwo">Page Two</a></li> </ul> </div> </div> </div> </body> </html>
要特別注意的是引入js庫的順序，參照下圖：
即：自己的包和phonegap的js包要放在中間，不然會出一些錯誤，我開發的時候是遇見過這種狀況的，而且jQuery Mobile的官方也是這么要求的。
再打開pageThree.html，加入如下代碼：
<div id="PageThree" data-role="page"> <div data-role="header" data-backbtn="true"> <h1>Phone Gap Three</h1> <a data-role="button" data-rel="back">Previous</a> </div> <div data-role="content"> <div> <a href="#" id="alert" data-role="button" data-theme="b">Alert</a> </div> <div> <a href="#" id="confirm" data-role="button" data-theme="b">Confirm</a> </div> </div> <div data-role="footer"> <div data-role="navbar"> <ul> <li><a href="#PageOne">Page One</a></li> <li><a href="#PageTwo">Page Two</a></li> </ul> </div> </div> </div>
選擇工程，右鍵run as > android application，你應該能夠看到下圖：
到這里工程的開發已經完了，希望有興趣的可以具體操作一遍，然后可以修修改改其中的一些東西，這樣才能體會到這個開發過程是怎么一回事，光看和復制粘貼是很容易忘記怎么去開發的。
在我進行了一段時間的開發之后，我認為phonegap的好處在於：
（1）一個應用能夠很容易就移植到其他的平台，不需要同樣的邏輯寫多種語言版本；
（2）容易上手，學習了html5和js既可以進行開發；
（3）如果學會了如何開發phonegap插件，那么android能夠做的事情，phonegap都能夠幫你完成，其他平台開發也如此。（如何開發插件已經不是這篇blog的內容了）
同時我感覺phonegap讓我最不爽的一點就是調試太麻煩了，要在模擬器上才能看到效果到底對不對。
同時附上開發簡易順序：
（1）把phonegap的jar包和xml文件放到工程下的正確目錄；
（2）修改src下的android默認類，參照4 （1）；
（3）在aseets下面建立工程的根目錄www，並在其中放入js、html、image、css等普通的web文件；
（4）只需要在index頁面加入js包和css文件，其他頁面只需要組織成一個簡單的jQuery Mobile頁面。
（5）調用一些特殊的api時，需要注意申請android許可！（百度一下就可以輕松解決）
最后一個壓縮包是工程壓縮包。