體驗phonegap3.0


網上有各種各樣的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;

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM