Ionic+Cordova开发环境搭建

Ionic+Cordova的组合是一个跨平台的移动开发框架，属于HybirdApp开发模式。其中Ionic是一个前端框架，集成了AngularJs在里面，有很好很漂亮的UI控件。Cordova本身就是一个跨平台的移动开发框架，可以将应用打包成各个平台下的应用。他们之间的关系可以用下面的图展示：

开发环境搭建

1、安装JDK，要求版本至少是1.6的。JDK可以去官网下载：http://www.oracle.com/technetwork/java/javase/downloads/index.html，安装后记得设置环境变量。

2、安装Anroid SDK，下载地址：http://sdk.android-studio.org/，安装完成后同样需要设置环境变量。然后打开sdk安装Android sdk tools，Anroid platform tools、Android build tool，以及版本包，然后在Extras里面把support library也安装上。

3、安装nodejs，下载地址：https://nodejs.org/dist/，安装完成后设置环境变量。

4、安装python，下载地址：https://www.python.org/downloads/，安装完成后设置环境变量。

5、安装gradle，下载地址：http://sdk.android-studio.org/，安装完成后同样需要设置环境变量。

6、通过npm安装cordova，如下：

npm install -g cordova

安装完成后通过cordova  -v命令查看是否安装成功。

7、下面就是安装ionic了，这个比较坑，其实也是通过下面的命令来安装：

npm install -g ionic

但我安装失败了，说是需要VCBuilder，而这个需要安装VC ++2013 EXPRESS，得6个多G。网上说可以通过制定使用vs的版本MSVSBuilder来代替VCBuilder，命令如下：

npm config set msvs_version 2010 --global 

其中2010是你的VS的版本。不幸的是我仍然失败。（后记：后来我在另外一台机器上安装成功了，可能是因为我安装了vs 2008。）

后面发现那个安装ionic的命令其实是安装ionic的命令行工具，那些命令其实cordova都有类似的。而且ionic只是一个前端框架，那么它的本质不过是一些css和js文件而已，只要引入到项目中就可以直接使用了。所以这个命令行工具没有也罢，而且幸运的是ionic提供了图形化的开发工具ionic creator和ionic Lab，不熟悉命令行的人也可以轻松的创建项目，那么Ionic的命令行工具就可有可无了。如果硬要安装ionic命令行工具，又失败了，下面的解决方案或许会有帮助。

安装ionic失败的各种解决方案：

1、ionic + cordova 环境搭建

2、搭建开发环境

3、安装ionic出现的错误

创建工程

开发环境搭建好了之后，就开始创建工程吧！

没有了ionic的命令行工具，就使用cordova的命令行工具来创建工程。(个人感觉使用ionic创建项目其实也是调用的cordova的命令行工具来创建的。如果安装ionic命令行工具成功了，就参考ionic创建项目的命令吧，这里有两个个参考链接：http://www.runoob.com/ionic/ionic-install.html，http://ionicframework.com/docs/cli/)

1、创建项目

cordova create hello com.example.hello HelloWorld 

其中hello是项目文件夹名，com.example.hello是包名，HelloWorld是app名称。如果想直接创建项目可以只给目录参数即可：

cordova create projectName

然后添加平台，这样打包时才可以打包成相应平台下的app。

cordova platform add android

2、创建资源包工程

创建资源包工程需要Ionic命令行工具，如果命令行工具安装失败了，也可以自己手动创建（参考链接：http://www.runoob.com/ionic/ionic-creat-app.html）。幸运的是我们也可以利用Ionic Creator来创建。我采用了Ionic Creator，因为它方便，很多目录结构和基础代码都帮我写好了。

2.1 打开creator网站：https://creator.ionic.io/app/dashboard/projects

点击右上角的New Project来创建新的资源包项目。

填入项目名称，选择项目类型后就可以创建项目了。如下图所示：

界面十分简单，不能指望它能够帮助我们做很多复杂的事情，但是可以利用它迅速搭起来一个整体的框架。

2.2 导出资源包工程

      我们不做任何的界面设计，直接保存。然后点击右上角的导出按钮，然后出现下面的：

选择zip file，然后下载下来即可。上面四种方式中，如果之前ionic命令行工具安装失败，则第一种是不能用的。最后两种是需要钱的，所以只能使用第二种。

3、将下载好的资源包工程解压后，替换掉cordova创建的工程中根目录下的www文件夹下的所有文件。

4、选择你熟悉的工具进行业务开发（主要是资源包的开发），我这里使用的是webstorm。

用webstorm打开后可以看到，ionic creator已经帮我们做了不少的工作，index页面，模板页，ionic库，控制器，路由都帮我们建好了，省得我们还要手动的去构建这些代码。接下来就可以愉快的开发了。需要注意的是，如果想要进行cordova插件开发，那么需要将相应平台下的工程导入到相应的开发工具中。例如将platform下的android的项目导入到eclipse中，进行插件开发。插件开发可以参考我的文章： Cordova插件开发。不过一般corodva官网上有很多插件供我们选择，一般是够用了。

5、开发完成后，使用cordova 打包项目成目标平台的应用。

cordova build android

6、进行仿真

cordova emulate android

前提是需要安装虚拟机(AVD)，这个可以在Android SDK中安装。不过我的仿真速度很慢，我一般是放在手机上进行测试效果。

如何使用cordova插件？

1、cmd进入到工程目录

2、安装插件

cordova plugin add cordova-plugin-shake --save

--save参数是将插件添加到config.xml中，这样才可以使用，否则就只是下载下来而已。

3、然后就可以在项目中使用相关插件功能了。

总结：

这里对ionic+cordova的开发环境，工程创建和插件使用进行了比较详细的介绍，更多的开发资料请去cordova和ionic的官网上查看。这里给个传送门：

1、 cordova官网

2、 ionic官网

这里有我写的一个demo可以学习： 手机检测和记步app