PhoneGap與Jquery Mobile結合開發android應用的配置
由於工作需要，用到phonegap與jquery moblie搭配，開發android應用程式。
這些技術自己之前也都沒接觸過，可以說是壓根沒聽說過，真是感慨，在開發領域，技術日新月異，知識真是永遠學不完的。就算是做java開發的，可是細分下來，專業方向還是很多的；自己沒有涉及的技術還是太多了，自個需要對單個領域專業點，知識豐富點。做不了全才，那咱做個專才，在如今社會還是必須的。
好了，咱們言歸正傳：
PhoneGap是一個開源的開發架構，使用HTML，CSS和JavaScript來構建跨平台的的行動裝置 App程式。它使開發人員能夠利用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>
運行結果如下：
轉：http://www.myexception.cn/android/434545.html
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
