搭建PhoneGap开发环境以及新建项目

搭建PhoneGap开发环境以及新建项目

PhoneGap作为新一代的跨平台开发工具受到越来越多的人的喜爱，是一个使用js，css以及html等语言作为开发语言的。使用使用phoneGap开发出来的项目可以编译打包到不同的运行平台，比如android、ios等。下面我就介绍一下使用PhoneGap开发android项目的开发环境搭建以及新建一个简单的项目。

PhongGap环境搭建

1、所需工具

   jdk(java所需编译环境,建议jdk_1.7+)

  android-sdk(android工程编译环境)

  ant(android工程打包工具)

  eclipse(android项目开发工具)

  adt(android开发工具插件)

  node.js(使用本工具安装phoneGap)

    phoneGap(phoneGap开发工具)

  js开发工具，推荐使用webstrom(前端开发工具)

1.1、jdk的安装。

从网上下载jdk安装，并配置环境变量。当java和javac命令能正确运行的时候就行了。网上很多jdk的安装介绍在此不做说明。

1.2、 android-sdk的安装。 android-sdk实际上是一个压缩文件，可以运行在线更新(不过google在国内无法使用以后，在线更新要使用代理据说github上面有一个地址，不过我暂时没有找到，如果以后找到会更新上来，或者翻墙进行跟新，不过速度很慢)，在项目编译和打包发布的时候需要使用android-sdk，需要和eclipse配合使用，在下面的eclipse配置中进行说明。不过使用phoneGap开发android项目时需要配置android_home。我的android-sdk的目录是：F:\software\android-sdk-windows，则需要在系统环境变量Path中添加：

F:\software\android-sdk-windows\tools；F:\software\android-sdk-windows\platform-tools。配置过后再执行

android命令和adb命令如果执行成功则证明配置成功。(有时这个环境变量的配置需要重启电脑)

1.3、ant是一个android项目的打包工具，需要配置环境变量，我使用的是eclipse自带的，环境变量 是：F:\software\adt-bundle-windows\eclipse\plugins\org.apache.ant_1.8.4.v201303080030\bin。

1.4、eclipse是开发android的利器，不过需要配置ant和android-sdk。手动下载和自己android-sdk相配套的ADT，使用eclipse的help->install new software安装ADT 

在配置玩ADT后再window->preference中配置android-sdk的location

至此android开发环境已经配置好了，如果不是使用phoneGap进行开发，这个时候已经可以结束了。

1.5、ADT在上面已经进行了配置，在此不做再次说明。

1.6、安装node.js,从网上下载对应版本的nodejs，最新版本的是4.1.2。按照一般的软件安装方式安装node.js,安装完成后配置环境变量，比如我的nodejs安装目录是F:\software\nodejs\，那就在系统环境的path中添加F:\software\nodejs\，配置完成后运行 node -v，命令执行成功就代表nodejs安装成功，如果没有执行成功，很有可能是环境变量没有配置成功。

1.7、安装phoneGap和Cordova，在命令行运行 npm install -g phonegap，在执行成功后，运行 npminstall -g cordova 。

但是在运行npm install -g phonegap 很有可能会出现连接速度太慢导致的无法安装错误，这个时候可以使用代理完成，具体请见 http://blog.youkuaiyun.com/u012251421/article/details/48602041。在运行完成后 phonegap -verison和cordova -version命令，会出现具体的版本信息，则表示安装成功，否则安装失败，请检查失败原因。

到此phoneGap的开发环境已经搭建好了，下面总结一下。

安装phoneGap失败的原因主要有两个：

 一是环境变量的配置，这个是很容易出现错误的地方，大部分情况是缺少环境变量或者配置的变量路径出错。二是在安装phoneGap的时候出错，原因有两个，一是网络原因，二是代理原因，代理原因的解决方法上面有说明。下面说一个需要配置的环境变量，所有的环境变量都是操作系统环境变量Path:

Java :新建系统环境变量JAVA_HOME=F:\software\Java\jdk1.7.0_21

Path中添加：%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;

成功执行 java 和javac命令证明安装成功

Android-SDK：新建系统环境变量：

ANDROID_HOME=F:\software\android-sdk-windows

Path中添加：%ANDROID_HOME%\platform-tools;%ANDROID_HOME%\tools;

执行android和adb命令成功。

Ant:在Path添加

F:\software\adt-bundle-windows\eclipse\plugins\org.apache.ant_1.8.4.v201303080030\bin;

NodeJs：Path中添加 F:\software\nodejs\;

执行node –v成功

执行npm install phonegap he npm install cordova 成功，后执行phonegap – version和cordova –version成功。

如果上面的操作都执行成功，则环境搭建成功。

PhoneGap搭建android项目

新建前准备：

需要执行命令：cordovaplatform add android，将android平台加入到环境中。

1、      新建工作目录，比如F:\phoneGapPro,进入该工作目录，执行命令：phonegap create myapp (该命令有很多参数，这里不做说明)，执行成功后，进入myapp这个目录，执行phonegap build android命令，这个命令执行成功后，当前项目编译完成了，可以导入eclipse运行了。

2、      项目导入

使用eclipse导入android项目

说明：勾选对应的两项，千万不要勾选 Copy projectsinto workspace，不然会出现奇怪的错误。

项目导入后可能会有一些错误，进行修正就可以了。

运行项目：