一.安裝
在安裝PhoneGap開發環境之前,需要按順序安裝以下工具:1.Java SDK java sdk,不安裝的話不能正常安裝Android SDK。 安裝成功檢測:啟動DOS視窗start-->run-->cmd,在DOS視窗中鍵入:java -version,如能顯示版本資訊說明安裝正常。2.Eclipse java開發工具,這我就不用多說了,推薦裝classic版的。3.Android SDK 下下來安裝完之後是一個Android SDK Manager,你需要下載以下組件,可能需要較長時間:
4.ADT Plugin 這是一個Eclipse外掛程式,作用是關聯Android SDK,使你的Eclipse能夠建立Android工程,安裝方法如下: 開啟Eclipse中的菜單 “Help”->”InstallNewSoftware”進入軟體安裝介面,點擊“Add”按鈕,如設定即可下載。
5.PhoneGap 下載PhoneGap,解壓縮即可,開啟裡面的libs>android檔案夾:
其中標紅的三個檔案夾是我們需要用到的。
二.建立一個PhoneGap項目
1.在eclipse中建立Android Project。2.在項目的目錄下,建兩個檔案夾:/libs/assets/www3.進入將剛剛下載並解壓的PhoneGap包裡Anroid目錄,我們需要的資源都在這個目錄下。 將cordova-2.0.0.js這個js檔案(具體名稱視當時下載的版本而定)copy到/assets/www目錄下, 把cordova-2.0.0.jar檔案copy到/libs目錄下。 再把xml目錄(xml整個檔案夾)copy到android項目的res目錄下。4.在/assets/www下建立index.html檔案,內容看起來像這樣:
<!DOCTYPE HTML><html> <head> <title>PhoneGap</title> <script type="text/javascript" charset="utf-8" src="cordova-2.0.0.js"></script> </head> <body> <h1>Hello World</h1> </body></html>
5.將以下許可權配置的xml內容copy到AndroidManifest.xml檔案中:
<supports-screensandroid: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" />
6.將以下內容添加到AndroidManifest.xml檔案的activity標籤中:
android:configChanges="orientation|keyboardHidden
這是為了保證機器在橫豎屏切換的時候不會重新執行Activity的onCreate方法;
7.AndroidManifest.xml最後看起來會像這樣:
<?xml version="1.0" encoding="utf-8"?><manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.example.shawn" android:versionCode="1" android:versionName="1.0"> <supports-screens android:anyDensity="true" android:largeScreens="true" android:normalScreens="true" android:resizeable="true" android:smallScreens="true" android:xlargeScreens="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.INTERNET" /> <uses-permission android:name="android.permission.RECEIVE_SMS" /> <uses-permission android:name="android.permission.RECORD_AUDIO" /> <uses-permission android:name="android.permission.RECORD_VIDEO" /> <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" /> <uses-permission android:name="android.permission.BROADCAST_STICKY" /> <uses-sdk android:minSdkVersion="8" android:targetSdkVersion="15" /> <application android:label="@string/app_name" android:icon="@drawable/ic_launcher" android:theme="@style/AppTheme"> <activity android:name="outer" android:configChanges="orientation|keyboardHidden" android:label="@string/app_name" > <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> </application></manifest>
其中<application>標籤我們可以看做是我們當前的應用,而<activity>代表我們應用內的一個介面,<intent-filter>標籤裡我們給當前版面設定了一個許可權
android.intent.action.MAIN表示是最先啟動的的介面;
android.intent.category.LAUNCHER決定應用程式是否顯示在程式列表裡;
另外需要注意的是:
<activity android:name="outer" android:configChanges="orientation|keyboardHidden" android:label="@string/app_name" >
我們的<activity>標籤中有這樣一個類名outer,我們可以自己定義它,一會兒我們會用到這個類名。
8.在剛剛建立的Android Project中找到libs目錄並在cordova-2.0.0.jar上點擊右鍵,選擇 Build Path->Add to Build Path
9.最後再修改下src下的Java主檔案(如果沒有就自己建立一個),我們要做以下幾件事: 1)添加import com.phonegap.*; 2)刪掉import android.app.Activity; 3)還記得剛才的outer類嗎?這裡將outer繼承為DroidGap; 4)把setContentView()這行替換為super.loadUrl("file:///android_asset/www/index.html"); 5)最後看起來就像這樣:
package com.example.shawn;import android.os.Bundle;import org.apache.cordova.*;public class outer extends DroidGap { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); super.loadUrl("file:///android_asset/www/index.html"); }}
package com.example.shawn;這句話是幹嘛的呢?這是java中常用的,類似於檔案的姓氏,看看檔案樹就知道了,這是放在檔案前面定位用的。
public class outer extends DroidGap;這裡將outer類繼承為DroidGap,同時本檔案的檔案名稱也要注意保持一致(outer.java),否則會報錯。
super.loadUrl("file:///android_asset/www/index.html");這句話大家可以理解為載入一個網頁,這個路徑大家很熟悉,就是我們的首頁。透過這句話我們也可以看到phoneGap最根本的東西,就是在原生語言與網頁語言之間架一座橋。
然後就可以在模擬器下試著運行一下這個項目,成功的話會出現Hello World的介面。
ok了,至此為止,phonegap的android開發環境就搭建好了,您可以基於phonegap編寫自己的android應用了!