代码改变世界

体验phonegap3.0

2013-12-08 23:37 by dreamhappy, ... 阅读, ... 评论, 收藏, 编辑

网上有各种各样的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;