phoneGap+cordova+ionic混合app开发环境搭建

　　近段时间组件写的差很少了，老大又给了个新任务：研究phonegap+cordova+ionic。之前作混合app开发都是用的Hbuilder+mui+(H5+)来搞的。phonegap对我来讲，彻底是一张白纸。瞎折腾了好几天，终于把环境搭建起来了，中间踩了太多的坑，浪费了大量的时间，因此决定把整个环境搭建的过程写下来，若是有须要的小伙伴，尽管拿去，以避免少走弯路。

1、环境搭建

　　说明：如下环境搭建都是基于windows7 64位操做系统而言，对应的软件也是64位，若是不是64位操做系统，可参照该文档并自行下载适合本身操做系统的相关软件。

一、JDK的安装和环境变量的配置　

　　请下载java JDK1.6以上的版本，我这里使用的1.7版本的，官方下载的连接为：http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-1880260.html。环境变量配置可参考如下博客：http://www.cnblogs.com/linjiqin/archive/2013/11/02/3403095.html

 

　　配置完成之后打开cmd命令窗口，在命令行中分别输入java 和javac，并使用 javac -version查看配置的JDK版本，若是出现如下信息，表示安装成功： 输入 jvava:

输入javac

输入 javac -version

备注：这里必定要用javac -version检查一下当前正在使用的JDK的版本，颇有可能你的电脑上安装了其余的jdk版本，你配置的时候一不当心又配置错了，谁又知道呢？

 二、Android Development Tools的下载和环境变量的配置

　　Android Development Tools已经包含了Android SDK、eclipse，解压便可用。下载地址：https://developer.android.com/sdk/index.html。请认准必定要下载这个最全的，phonegap不支持Android4.1如下的，因此你到时候还要更新。本身也试过其余的几个development Tools包，可是都是在 build Android的时候报错了。惟独使用这个的时候最后会成功。

　　下载完成之后，把adt包解压到一个目录下，以下：

解压完成之后，开始环境变量的配置：点击桌面计算机，右键属性，选择高级系统设置，点击环境变量，进入环境变量配置

A、找到系统变量模块，点击新建，在变量名中输入：ANT_HOME，在变量值中输入：　　

　　C:\Program Files (x86)\adt\eclipse\plugins\org.apache.ant_1.8.3.v201301120609 （请注意路径，若是adt的包不是放在和我同样的目录，请本身进行更改，如下同理），最后点击肯定。

B、Path环境变量的配置：打开notepad或者是notepad++，输入：

　C:\Program Files (x86)\adt\sdk\tools;C:\Program Files (x86)\adt\sdk\platform-tools;%ANT_HOME%\bin; 其实就是配置sdk的tools和platform-tools。再在系统环境变量中找到path变量，点击编辑，在变量值一栏的最后先输入一个分号，在把notepad++中的内容拷贝进去。点击肯定便可。

C、验证：打开cmd命令窗口，输入ant,若是出现如下信息，表示环境变量配置成功：

三、Nodejs的安装

　　Nodejs下载地址：https://nodejs.org/en/。 我这里使用的是v.4.4.4版本，使用最新的也是能够的。下载完成之后，直接点击安装，而后下一步，直到完成便可。验证安装是否成功：打开命令窗口，在命令行中输入: node -v,出现如下信息表示安装成功：

四、nrm安装

　　nrm是一个npm资源管理器，容许你快读地在以下NPM源间切换。想要了解的，能够阅读这篇文章：http://www.tuicool.com/articles/nYjqeu 安装：打开命令窗口，在窗口中先输入npm install -g nrm进行安装,若是出现如下信息，表示安装成功。

查看： 继续输入 nrm ls

切换： nrm use taobao

五、Phonegap3.4的安装

　　打开命令窗口，输入npm install -g cordova 。若是出现如下信息，表示安装成功。

　　

　　顺便检查一下cordova的版本，一样输入 cordova -v

　　

　　至此，phonegap+cordova的环境安装完成。

六、ionic的安装

　　相对于phonegap +cordova的环境安装，ionic安装就更简单了。只须要在命令行中输入：npm -install -g ionic便可：

　　

　　检查版本

　　

2、建立应用

　　一、在D盘目录下新建一个phonegap文件夹。

　　二、打开命令窗口，切换到该目录下

　　

　　三、输入 ionic start demo003命令，其中demo003是你的项目名称

　　

　　若是出现这种状况，只能从新再来，记得删除phonegap中demo003文件夹

　　若是出现以上的信息，那确定是安装成功咯！！！

　　四、添加android支持：切换到你建立的项目目录下，输入 ionic platform add android命令

 　　

　　五、Build andriod：在命令行中输入 ionic build android命名

　　

 

　　在build的过程当中，若是没有出现build successful信息，则表示build出错，若是不肯定问题缘由，能够看报错信息。

　　六、运行：用数据线把手机和电脑相连（可使用360助手）。确认链接成功之后，在命令行中输入 ionic run android 命令

　　

　　这个时候要查看你的手机，要赞成用USB安装软件，点击肯定之后，会在你手机上安装一个名为demo003 APP，打开app，效果以下：

　　

 

　　至此，phonegap+cordova+ionic的开发环境已经搭建完成。

 

 

 

 

3、资源下载

　　ionic视频下载：http://www.ionic.wang/course-index.html

　　ionic主页：http://www.ionic.wang/

　　phonegap视频站：http://www.phonegap100.com/

　　cordova插件：http://ngcordova.com/docs/plugins/camera/

 

　　目前还在持续的研究整个的开发流程，若是摸清了，后续可能会补充相关的开发文档。