PhoneGap是一能夠讓你用普通的web技術(shù)編寫出能夠輕松調(diào)用API接口和進(jìn)入應(yīng)用商店的HTML5應(yīng)用開發(fā)平臺(tái)。是唯一的一個(gè)支持7個(gè)平臺(tái)的開源移動(dòng)框架。它的優(yōu)勢(shì)是無以倫比的:開發(fā)成本低——據(jù)估算,至多Native App的五分之一!
目前Adobe剝離cordova以phonegap作為開發(fā)品牌,命令行也由原來的cordova改為phonegap。接下來將記錄我安裝phonegap3.4.0的過程。
第一步,在線安裝
打開命令行輸入(請(qǐng)先確認(rèn)機(jī)子有安裝nodejs 下載地址http://nodejs.org/)
npm install -g phonegap
由于網(wǎng)絡(luò)的問題,我裝了3次才裝上。裝好之后,就是創(chuàng)建工程了(先確認(rèn)ant命令 adb命令能正常使用 ps:adb命令在SDK包里的platform-tools文件夾下)
phonegap create my_app
cd my_app
phonegap run android
如果一切正常將會(huì)在虛擬機(jī)中看到helloworld的app。虛擬機(jī)可以通過eclipse先打開。這樣就在你的電腦里安裝了phonegap。不過工程是用ant的方式創(chuàng)建的,使用起來不是很方便。
第二步,制作jar文件
方法在官方上有介紹,不過需要添加成兩個(gè)工程xxx 和 xxx-CordovaLib,這顯然不夠友好。xxx-CordovaLib其實(shí)為我們?cè)?.9中使用到的cordova-2.9.0.jar文件,接下來就是制作這個(gè)jar文件。命令行下打開phonegap的目錄,執(zhí)行以下命令
cd .cordova/lib/android/cordova/3.4.0/framework
android update project -p
ant jar
執(zhí)行成功后在framework目錄下就能找到cordova-3.4.0.jar,把這個(gè)包扔到工程的libs目錄下,這樣就不用打開xxx-CordovaLib。
第三步,目錄整理
當(dāng)用eclipse打開的工程你會(huì)發(fā)現(xiàn)目錄結(jié)構(gòu)跟2.9.0差很多,在assets文件目錄下只有個(gè)_where-is-www.txt,打開這個(gè)文件里頭有說明:
To show `assets/www` or `res/xml/config.xml`, go to:Project -> Properties -> Resource -> Resource Filters
And delete the exclusion filter.
按照提示打開項(xiàng)目->屬性->資源->資源過濾器,然后刪除exclusion 里的選項(xiàng)。
在看目錄assets目錄下就有www文件夾,res下的xml也生成了config.xml。由于之前有使用ant進(jìn)行項(xiàng)目的構(gòu)建所有還有一些沒有用的文件夾,模仿2.9.0的目錄結(jié)構(gòu)進(jìn)行刪除,這樣一個(gè)3.4.0的eclipse工程就建立好了。
安裝前準(zhǔn)備工作
1、下載java sdk 1.6以上版本
2、下載Android Development Tools
已經(jīng)包括了Android sdk、esclipe,解壓即可使用。
https://developer.android.com/sdk/index.html
3、設(shè)置系統(tǒng)變量
系統(tǒng)變量 Path后面添加:
一定要注意的是比 在2.9的安裝中多了ant的安裝,還有就是下面列出來的四個(gè)路徑不能是中文,不然ant編譯會(huì)錯(cuò)誤
D:\Program Files\ADT\sdk\tools;
D:\Program Files\ADT\sdk\platform-tools;
D:\Program Files\ADT\sdk\eclipse\plugins\org.apache.ant_1.8.3.v201301120609\bin
C:\Program Files (x86)\Java\jdk1.6.0_10\bin;
新增 JAVA_HOME,設(shè)置值為java sdk 根目錄:
C:\Program Files (x86)\Java\jdk1.6.0_10\
配置完成后檢測(cè)是否安裝成功
1.輸入 java 如下圖表示成功
2.輸入 javac 如下圖表示成功
3.輸入 ant 如下圖表示成功
4、下載并安裝NodeJS
NodeJS
5、進(jìn)入cmd,執(zhí)行以下命令安裝
npm install cordova
6、新建phonegap 項(xiàng)目
cordova create hello com.example.hello "HelloWorld"
cd hello
cordova platform add android
cordova build
7、使用ADT工具打開并編輯該項(xiàng)目
File>New>Project>Android>Android Project from Existing Code
選擇則剛才建立項(xiàng)目所在路徑,即可使用ADT打開進(jìn)行編輯。
8、項(xiàng)目的結(jié)構(gòu)
主要編輯 assets/www 目錄下的 html css js 文件。
主目錄下面的www目錄為 assets/www 目錄的引用 直接編輯也是可以的