phonegap3.4 for android 開發環境配置
對於新手來說最鬱悶的是沒人告訴你phonegap3.4和phonegap2.8的使用方式不一樣,結果根據教程總是無法進行下去,我就是這樣一個新手,經過兩天的折騰,總算有點眉目,今天在這裡總結一下。
1,首先是android開發環境準備
1)adt-bundle
對於新手來說最好使用ADT Bundle,雖然使用Eclipse安裝外掛的形式也可以,但是在目前網路環境不佳的情況下,加上本來就對Eclipse IDE就不熟悉,所以直接下載ADT Bundle是最省事的,下載解壓即可以用,而且android的sdk、外掛都已經給你配置好了。
下載頁面:http://developer.android.com/sdk/index.html?hl=sk
這個下載下來之後,解壓即可使用,但是要配置一個環境變數PATH,將sdk目錄下的platform-tools目錄和tools目錄加到PATH中,如下圖:
2)jdk(注意是jdk,不是jre,jdk包括jre)
開發android程式來說jdk是必備的,其實很多其它開發環境也要求jdk,可能你都已經裝好了,沒有的話去oracle官網下載一個:
下載頁面:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html
當然還是下載離線版本的,很多工具線上安裝都出奇的慢。
這個安裝完成之後,應該是自動配置好環境變數JAVA_HOME的,如果沒有,就自己配置上去,如下圖:
3)下載ant
打包jar用的工具,下載頁面:http://ant.apache.org/bindownload.cgi
這個ant下載下來解壓之後就可以使用,但是要配置一下環境變數PATH,把ant\bin目錄加到PATH中,如下圖:
4)nodejs
需要用到nodejs中的npm來安裝phonegap3.4,這個直接在官網上下載就可以:http://nodejs.org/
直接點INSTALL,它會自動選擇匹配你係統的版本下載。
安裝完成之後,設定一下NODE_PATH環境變數,比如你的nodejs安裝在d:\nodejs下,則NODE_PATH設定為d:\nodejs\node_modules,該目錄就是以後通過npm安裝的所有包的安裝路徑,而且使用npm安裝時不要使用-g選項,而是直接到d:\nodejs目錄下,使用npm安裝,因為我不喜歡將包安裝在C盤下一個很深的目錄下,找都找不到。
5)python2.7.3
python很多地方也需要用到,所以最好安裝上,而且建議安裝2.7.3版本,同樣也在官網上下載(官網上有的絕不再其他地方下載)
下載頁面:https://www.python.org/download/releases/2.7.3
下載完成,安裝之後,需要設定兩個環境變數:
PYTHON:%PYTHONPATH%\python.exe
PYTHONPATH:D:\Python27
這裡PYTHONPATH是Python的安裝路徑,PYTHON是python的執行檔案。
2,第一個android程式
至此,開發環境應該準備完成了,開啟eclipse先試一個hello world吧:
1)File->New->Project...開啟工程建立對話方塊:
2)下一步Next>,填寫工程名稱learn1
只需要填寫”Application Name“,然後一路Next>,最後Finish
3)執行
可以看到工程learn1已經新建出來而且還有一個伴隨的工程appcompat_v7(我也是新手,還沒來得及研究這個什麼意思),先不管這個什麼意思,你還會看到工程名稱前面有紅色的感嘆號,紅色的叉號(什麼?新建出來的工程就有錯誤?),別急,等會兒這個提示就消失了,然後你就在learn1工程上點選右鍵,選擇”Run As“->”Android Application“,哦,對,Android虛擬機器還沒有建立,怎麼執行程式呢?android程式需要在一個模擬的Android機器上執行,或者直接在一個Android真機上執行。如果你有android手機的話,用usb連線手機,開啟手機上的除錯模式(如果手機驅動沒有安裝,請先安裝驅動,具體怎麼安裝請Google)。如果一切準備就緒,你Run AS->Android Application將看到這麼一個對話方塊:
選擇那個正在執行的裝置,開始執行吧。
當然你可以建立虛擬機器(Android Virtual Device),只不過虛擬機器的執行非常慢,啟動都非常慢,不要怪我沒提醒你,別以為虛擬機器啟動不起來,其實它很慢。
第一個android程式完成了,也就是android開發環境沒有問題了,下面就將說說怎麼整合phonegap開發環境。
3,phonggap2.8版本(帶cordova-2.8.1.jar)
下載phonegap2.8.1版本,下載頁面:http://phonegap.com/install/,選擇phonegap2.8.1。下載完成解壓備用。
1)新建一個android工程
2)將phonegap2.8.1相關檔案拷貝到工程中
將phonegap2.8.1/lib/android/cordova-2.8.1.jar拷貝到工程目錄的libs下,
將phonegap2.8.1/lib/android/cordova.js拷貝到工程目錄的assets/www目錄下(沒有就新建),
將phonegap2.8.1/lib/android/xml目錄拷貝到工程目錄的res目錄下。
你看到的工程目錄結構應該是這樣子的:
3)修改程式碼
首先修改AndroidManifest.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" />
然後在activity標記中新增android:configChanges="orientation|keyboardHidden”
4)新建一個index.html檔案做為程式的主介面
在assets/www目錄上點選右鍵新建一個File,取名為index.html,內容為:
<!DOCTYPE HTML>
<html>
<head>
<title>PhoneGap</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
5)修改程式碼MainActivity.java
開啟src/com.example.learn2下的MainActivity.java檔案,修改MainActivity類,如下:
修改成:
注意onCreate需改成public,然後把MainActivity類中的其它函式都刪除。
6),將cordova-2.8.1.jar新增到Build Path
在cordova-2.8.1.jar上點選右鍵,選擇Build Path->Add to Build Path
7),執行
選擇RunAS->Android Application吧,可以看到基於phonegap的android執行起來了,介面就是index.html中的介面。
4,phonggap3.4版本(沒有cordova.jar)
phonegap3.4版本預設是沒有cordova.jar檔案的,做為新手的我最早下載的是2.9.1版本的,結果也是沒有jar檔案的,而入門教程都提到了這個檔案,入門不下去啊,結果就是放棄了這個版本,轉成2.8.1版本,2.8.1版本搞成之後,不甘心啊,所以繼續研究3.4版本,發現3.4版本更加簡單:
1)安裝phonegap3.4版本
在nodejs的安裝目錄下執行npm install phonegap,有些地方寫npm install cordova,反正很亂,我是執行的phonegap這個,這個安裝可折磨死人了,原因你懂的。所以你需要一個代理,推薦使用goagent(我一直使用這個,很穩定,怎麼安裝,還是Google吧)
2)安裝完成之後就可以開始新建android工程了
在你的eclipse 工作目錄下執行:
$ phonegap create my-app
$ cd my-app
插上android手機
$ phonegap run android
執行最後一步phonegap run android的時候如果報這個錯:
phonegap 3.4 Error: An error occurred while listing Android targets
可能是由於你沒有設定將adt目錄下的sdk目錄下的platform-tools目錄和tools目錄加到PATH中,參照環境配置。
3)將建立的工程匯入eclipse中
File->New ->Project->Android Project from Existing Code,如下圖:
我們發現這裡有兩個工程HelloWorld和HelloWorld-CordovaLib,HelloWorld-CordovaLib其實就是2.8.1中的那個jar檔案,兩個都匯入,編譯完之後,執行HelloWorld,結果與phonegap run android 一樣。
這裡有一個問題,就是我將”Copy projects into workspace"勾上之後,匯入,報了這麼一個錯誤:
[2014-05-16 16:32:53 - HelloWorld-CordovaLib] Project has no project.properties file! Edit the project properties to set one.
而且HelloWorld的工程屬性中出現這麼一個錯誤:
目前沒有解決,如果大神看到這個,指導小弟一下,不甚感激。
其實上面這一步匯入,可以只匯入Helloworld,而不用匯入Helloworld-CordovaLib,因為Helloworld-CordovaLib就是為了生成cordova.jar庫檔案,我們可以自己使用ant打包生成一個然後拷貝到Helloworld工程的libs目錄下即可,打包過程如下:
進入cordova的framework目錄,我的目錄在C:\Users\myname\.cordova\lib\android\cordova\3.4.0\framework下
c:\>cd Users\myname\.cordova\lib\android\cordova\3.4.0\framework
c:\> android update project -p . (後面有個點哦,表示當前路徑,網上有篇文章漏了這個)
c:\>ant jar
正常情況下在當前目錄下就生成了一個cordova-3.4.0.jar檔案,將該檔案拷貝到Helloworld工程的的libs下就可以了。
所以以後建立phonegap3.4工程後,匯入eclipse時,就只需要匯入主工程,不需要匯入lib工程,然後選擇Copy projects into workspace,最後將cordova-3.4.0.jar拷到libs目錄下。
這個剛匯入的工程你會發現assets目錄下只有一個_where-is-www.txt檔案(www哪兒去了),開啟它,它會告訴你怎麼找回來的:)
終於寫完了,藉著總結的契機,又入門了一遍。