网上有各种各样的phonegap环境搭建资料,鉴于学习和整理的考虑,我还是把我搭建的过程整理出来
这篇文章中将涉及到的内容
PhoneGap环境需要的组件
Node环境
JDK
Android SDK
ADT
ANT
命令行安装phonegap
命令行安装
创建项目
windows下android环境搭建
疑难问题
参考资料
Phonegap环境需要的组件
node环境
http://phonegap.com/install/直接安装即可
JDK环境
主要涉及到环境变量的设置:ClassPath中添加 ;%JAVA_HOME%libdt.jar;%JAVA_HOME%lib ools.jar;
Android SDK
参考 http://developer.android.com/sdk/index.html#download
新建
Path中添加 ;%ANDROID_SDK_HOME%platform-tools;%ANDROID_SDK_HOME% ools;
ClassPath中添加;%ANDROID_SDK_HOME%platform-tools;%ANDROID_SDK_HOME% ools;
ADT
ADT的功能是建立eclipse与android sdk的关联,使得在eclipse中可以建立android项目。
ANT
参考地址: http://ant.apache.org/bindownload.cgi
下载文件放到指定目录下,在环境变量中,设置目录即可
classpath 中添加 ;%ANT_HOME%libant.jar;
path 中添加 ;%ANT_HOME%in;
验证命令:
cmd下执行 ant,出现以下界面标识安装成功。
命令行安装phonegap
安装phonegap有两个命令,npm install -g phonegap 和 npm install -g cordava,按道理说这两个命令使用一个就行了,实际上还是有些问题。
执行npm install -g phonegap 安装完以后在 在登录用户的特定位置会产生两个文件夹 npm和npmcache
我的环境下的位置
C:UsersAdministratorAppDataRoaming
这两个文件夹可以作为安装成功与否的辅助验证。
如果以上两个安装命令都执行的话,会出现以下两个文件夹依次对应。安装完成后,在 C:UsersAdministratorAppDataRoaming 路径下,会出现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;