PhoneGap與Jquery Mobile結合開發android應用的配置
由於工作需要，用到phonegap與jquery moblie搭配，開發android應用程序。
這些技術自己之前也都沒接觸過，可以說是壓根沒聽說過，真是感慨，在開發領域，技術日新月異，知識真是永遠學不完的。就算是做java開發的，可是細分下來，專業方向還是很多的；自己沒有涉及的技術還是太多了，自個需要對單個領域專業點，知識豐富點。做不了全才，那咱做個專才，在如今社會還是必須的。
好了，咱們言歸正傳：
PhoneGap是一個開源的開發框架，使用HTML，CSS和JavaScript來構建跨平台的的移動應用程序。它使開發者能夠利用iPhone，Android，Palm，Symbian，Blackberry，Windows Phone和Beda智能手機的核心功能——包括地理定位，加速器，聯系人，聲音和振動等。
Jquery mobile是由（MT）Media Temple聯合多家移動設備廠商以及軟件企業共同發起的的針對觸屏智能手機與平板電腦的website以及在線應用的前端開發框架。Jquery mobile構建於Jquery 以及 Jquery UI類庫之上，為前端開發人員提供了一個兼容所有主流移動設備平台的統一UI接口系統。擁有出色的彈性，輕量化以及漸進增強特性與可訪問性。
1.首先需要下載PhoneGap，可以去如下網站下載：http://phonegap.com/ 在首頁的右上角有個下載圖標，點擊可以下載其壓縮版本，現在最新版是PhoneGap1.5.0，下載后的文件名是：phonegap-phonegap-1[1].5.0-0-gde1960d.zip。
2.下載完成后，對其進行解壓，里面會有其介紹文檔和示例文件（包括android，ios，blackberry等），此處我們只需要用到android的，在解壓的文件中，在lib文件夾下的android文件夾中，我們找到cordova-1.5.0.jar(其實也就是其他網站中指的phonegap.jar)、cordova-1.5.0.js還有一個xml文件夾
3.新建一個android工程
4.在項目的根目錄下新建四個目錄。
/libs
/assets/www
/assets/css
/assets/js
5.將cordova-1.5.0.js拷貝到/assets/js目錄下。
6.將cordova-1.5.0.jar拷貝到/libs目錄下。
7.將xml文件夾拷貝到/res目錄下。
8.在src源代碼文件中的main java源代碼文件中做做一些修改。
將類由繼承Activity改成繼承DroidGap。
將setContentView()一行用super.loadUrl("file:///android_asset/www/index.html");替換
添加: import com.phonegap.*;
刪除import android.app.Activity
import org.apache.cordova.DroidGap; import android.os.Bundle; public class App extends DroidGap { /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); // setContentView(R.layout.main); super.loadUrl("file:///android_asset/www/index.html"); } }
布置好的項目截取如下：
此時你還沒有jquery mobile沒有關系。我們先把phonegap配置好，接着：
1.在AndroidManifest.xml中添加如下xml代碼，具體添加地方，可以參考上面的截圖：
<supports-screens android:largeScreens="true" android:normalScreens="true" android:smallScreens="true" android:resizeable="true" android:anyDensity="true" /> <uses-permission android:name="android.permission.CAMERA" /> <uses-permission android:name="android.permission.VIBRATE" /> <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" /> <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /> <uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" /> <uses-permission android:name="android.permission.READ_PHONE_STATE" /> <uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.RECEIVE_SMS" /> <uses-permission android:name="android.permission.RECORD_AUDIO" /> <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" /> <uses-permission android:name="android.permission.READ_CONTACTS" /> <uses-permission android:name="android.permission.WRITE_CONTACTS" /> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> <uses-permission android:name="android.permission.GET_ACCOUNTS" />
2.將如下 android:configChanges="orientation|keyboardHidden"添加到默認的activity標簽中。
3.然后在/assets/www/目錄下創建一個index.html文檔內容如下：
<!DOCTYPE HTML> <html> <head> <title>PhoneGap</title> <script type="text/javascript" charset="utf-8" src="cordova-1.5.0.js"></script> </head> <body> <h1>Hello World</h1> </body> </html>
4.加入jquery mobile支持，去其官網下載：http://jquerymobile.com/blog/2012/01/26/jquery-mobile-1-0-1-released/#download，
現在最新穩定版本是1.0.1，可以下載包含所需文件的zip格式的壓縮包，名稱： jquery.mobile-1.0.1.zip (JavaScript, CSS, and images) ，另外再下載jquery-1.6.4.min.js
下載下來后，解壓。把jquery.mobile-1.0.1.min.css放到assets/css目錄下，把jquery.mobile-1.0.1.min.js和jquery-1.6.4.min.js放到assets/js目錄下。
5.修改index.html
<!DOCTYPE HTML> <html> <head> <meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1" charset="UTF-8"> <link rel="stylesheet" href="../css/jquery.mobile-1.0.1.min.css"> <script src="../js/jquery-1.6.4.min.js"></script> <script src="../js/jquery.mobile-1.0.1.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Test</h1> </div> <div data-role="content" data-theme="a"> <div data-role="fieldcontain"> <label for="username">登錄名:</label> <input type="text" name="username" id="username" value="" /> <label for="password">密碼:</label> <input type="password" name="password" id="password" value="" /> </div> </div> <div data-role="footer"> <h4>Page Footer</h4> </div> </div> <div data-role="page" id="dialogPopUp"> <div data-role="header"> <h1>Dialog Title</h1> </div> <div data-role="content"> This is a dialog box </div> <div data-role="footer"> <h4>Additional Footer information</h4> </div> </div> </body> </html>
運行結果如下：
