1. 程式人生 > >phonegap3.4 for android 開發環境配置

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

,選擇一個適合你的版本(比如32位、64位的)


這個下載下來之後,解壓即可使用,但是要配置一個環境變數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哪兒去了),開啟它,它會告訴你怎麼找回來的:)


終於寫完了,藉著總結的契機,又入門了一遍。