網上有各種各樣的phonegap環境搭建資料,鑒於學習和整理的考慮,我還是把我搭建的過程整理出來
這篇文章中將涉及到的內容
PhoneGap環境需要的組件
Node環境
JDK
Android SDK
ADT
ANT
命令行安裝phonegap
命令行安裝
創建項目
windows下android環境搭建
疑難問題
參考資料
Phonegap環境需要的組件
node環境
http://phonegap.com/install/直接安裝即可
JDK環境
主要涉及到環境變量的設置:ClassPath中添加 ;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar;
Android SDK
參考 http://developer.android.com/sdk/index.html#download
新建
Path中添加 ;%ANDROID_SDK_HOME%\platform-tools;%ANDROID_SDK_HOME%\tools;
ClassPath中添加;%ANDROID_SDK_HOME%\platform-tools;%ANDROID_SDK_HOME%\tools;
ADT
ADT的功能是建立eclipse與android sdk的關聯,使得在eclipse中可以建立android項目。
ANT
參考地址: http://ant.apache.org/bindownload.cgi
下載文件放到指定目錄下,在環境變量中,設置目錄即可
classpath 中添加 ;%ANT_HOME%\lib\ant.jar;
path 中添加 ;%ANT_HOME%\bin;
驗證命令:
cmd下執行 ant,出現以下界面標識安裝成功。
命令行安裝phonegap
安裝phonegap有兩個命令,npm install -g phonegap 和 npm install -g cordava,按道理說這兩個命令使用一個就行了,實際上還是有些問題。
執行npm install -g phonegap 安裝完以后在 在登錄用戶的特定位置會產生兩個文件夾 npm和npmcache
我的環境下的位置
C:\Users\Administrator\AppData\Roaming\
這兩個文件夾可以作為安裝成功與否的輔助驗證。
如果以上兩個安裝命令都執行的話,會出現以下兩個文件夾依次對應。安裝完成后,在 C:\Users\Administrator\AppData\Roaming 路徑下,會出現npm-cache 和npm兩個文件夾,這就是phonegap安裝文件所在。
創建項目
phonegap的命令行工具,我的理解是有兩套,phonegap開始以及 cordova。我在實際使用中發現,phongap命令不是很靠譜,因此折騰了好長時間。之后就使用cordova了。
比如:創建項目 可以用 cordava create <projectName> 也可以使用 phonegap create <projectName>
生成一個默認的phonegap項目
之后是 在項目中加入android平台。
加入成功后,在platforms文件夾下會生成android文件夾,這樣用android IDE工具就可以引進這個android項目進行開發了,實際上phonegap的功能也主要體現在這里,之后的工作就在Android IDE 即eclipse中進行。
windows下android環境搭建
以下是一個簡要的關聯圖解
疑難問題
1 雖然安裝了android sdk,但是執行phonegap install android 或者 phonegap build android時,還是在檢測android sdk環境
最終這個問題沒有解決,但是我通過cordova 命令創建項目,加入android平台也實現了功能。這個問題還需要以后慢慢研究。
2 document.addEventListener(
"deviceready"
, onDeviceReady,
false
);
這句話是針對手機/平板設備有用的.所以在瀏覽器里不會執行。
正確的寫法是
if(!window.device){
$(document).ready(onDeviceReady);
}
else{
document.addEventListener("deviceready", onDeviceReady, true);
console.log('===>> document.addEventListener');
}
參考資料
PhoneGap 3.0發布:新API、更好的工具以及多平台支持
ant安裝、環境變量配置及驗證
PhoneGap 在 Android 上的插件開發方法介紹
關於Phonegap,存在跨域嗎?
提及到jQuery默認對跨域請求有一定的限制。於是就找到了代碼:$.support.cors = true;