nodejs+ionic+cordova+intellijIdea搭建webApp环境分析

第一次使用nodejs+ionic+cordova+intellijIdea搭建webApp开发环境，由于nodejs、ionic、cordova、andriod都是第一次接触，所以花了三天时间才把环境搭建好。这篇文章则是用来记录开发环境的搭建过程。

1、工具、安装包的准备

每个道友都应该知道android开发最痛苦的就是环境问题，要搭建一个开发andriod的app，必然会设计到sdk等东西。那么用nodejs+ionic+cordova+intellijIdea搭建一个android的webApp开发环境，我们应该准备以下工具：

1、nodejs安装包：

ionic以及codova都是要依赖于nodejs来安装的，因此我们需要准备nodejs的安装包，来在本机上安装一个nodejs。我们从nodejs的官网上下载最新的nodejs版本，官网地址为https://nodejs.org/en/


下载完以后，根据提示一直下一步进行nodejs的安装。

2、JDK1.7

相信各位道友本机上应该有JDK，因此这里就不多描述。没有的JDK的道友可以在网上搜索，下载，并安装。

3、IntellijIdea

这个可以在IntellijIdea的官网进行下载（http://www.jetbrains.com/idea/），我使用的版本是15。不过这个开发工具是要收费的，但是相信各位道友是可以搞定的。

4、SDK

想要开发android的道友，肯定都听说过这玩意。我们这里用的版本是android-23。大家可以在http://www.androiddevtools.cn/上进行下载。



下载完以后，点击进行无脑安装即可。安装完毕后，运行sdk-manager.exe，根据下图，选择要安装的tools、platform-tools以及android版本。




等待漫长的下载过程后，sdk则安装完毕。

5、apache ant下载

在http://ant.apache.org/网站，可以下载apache ant工具，并进行安装。


6、Genymotion安装

在https://www.genymotion.com/进行下载安装。这个是要注册的，可以随意注册个帐号进行使用。

2、环境变量的配置

此过程都是在【我的电脑】，右键-》属性-》高级系统设置-》环境变量中进行配置的

1、配置JDK
新建属性名为JAVA_HOME的环境变量，值为jdk安装目录，如C:\Program Files\Java\jdk1.7.0_51；然后在系统变量path中配置%JAVA_HOME%\bin;（注意分号）。配置好后，在cmd中输入java，若无异常，则jdk配置完毕。

 
2、配置sdk环境变量
新建属性名为ANDROID_HOME的环境变量，值为sdk安装目录，如D:\android\android-sdk；然后在系统变量path中配置%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools;
配置好后，再打开cmd，输入android，则会自动打开android SDK manager工具，则表明sdk配置ok。
 
3、配置ant环境变量
新建属性名为ANT_HOME的环境变量，值为ant安装目录，如D:\android\ant\apache-ant-1.9.6；然后在系统变量path中配置%ANT_HOME%\bin;%ANT_HOME%\lib;
配置好后，再打开cmd，输入ant，出现下图所示，则表明ant工具配置ok。


 
4、nodejs环境配置
在系统环境变量path中加入C:\Program Files\nodejs\

3、环境搭建

以上准备工作完成后，我们就开始搭建开发环境。首先通过nodejs安装我们的cordova。

（Cordova提供了一组设备相关的API，通过这组API，移动应用能够以JavaScript访问原生的设备功能，如摄像头、麦克风等。

Cordova还提供了一组统一的JavaScript类库，以及为这些类库所用的设备相关的原生后台代码。
Cordova支持如下移动操作系统：iOS, Android,ubuntu phone os, Blackberry, WindowsPhone, Palm WebOS, Bada和 Symbian。）
在cmd中，输入npminstall -g cordova 指令，则开始cordova的安装。如果不成功，请各位道友“墙”一下（这个跟网络也有关系，反正我在公司装cordova的时候就没成功过，也不知道公司对网络“做了什么”。顺便吐槽下，万恶的公司，money少，还要回家下资源），或者检查下是否是nodejs没有安装成功。安装成功后，可以在cmd中输入cordova
-version 查看cordova的版本。


 
cordova成功安装后，那么我们就要开始ionic的安装了。在cmd窗口中输入npm install –g ionic。（这个也是跟网络有关系哦）
 
在cordova和ionic安装成功后，恭喜你，你已经成功了一大半了。剩下的一半就是工程的搭建、编译、打包，以及和intellijIdea的集成了。
 
OK，我们继续环境的搭建。now，我们开始创建一个android的webApp工程。
首先在cmd中，进入你要想将工程创建的盘符路径。比如我是将工程搭建在D:/projectCode/webApp/ionicProject下，则在cmd中先进入该盘符路径。然后，输入ionic start +你的项目名。比如我们项目名叫做ionic_demo01 ,则输入的命令就为：ionic start ionic_demo01


 
工程初始化完毕后，你会发现你指定的路径下面就会生成你的工程了。
ok，我们现在开始添加android组件，在cmd中，输入ionic platform
add android命令（我第一次添加android组件的时候，报错，没有添加成功。但是在多试几次后由怪异的成功了。也不知道是不是网络的问题）。
在android组件添加成功后，我们就可以把这个工程进行编译、打包，生产apk文件。依然在cmd中，输入ionic build android命令（请注意，添加android组件和编译打包的步骤输入的指令，都是在你工程所在的盘符下进行指令的输入的）。这个是个漫长的过程（可能是公司的网络太烂吧，反正我是前前后后等了大约1个小时），在这个工程中它会去下载各种jar包，若是出现问题了，你可以再次执行ionic
build android命令（这个估计是下载时间长了，链接都断了吧）。
如果一切都没问题，最后他会告诉你生成了apk文件。看到这个文件的生成，那么这个时候，道友你可以笑了，这表明开发环境没有问题了。
 
其实在创建工程后，我们就可以将工程导入到intelliJIdea里面了。打开idea，在导入工程前，我们要先为idea安装cordova插件。File-》Settings-》plugins，点击【Browse repository...】，然后搜索cordova。将PhoneGap/Cordova Plugin 插件装上。
 
同时也可以将Genymotion插件装上。装上Genymotion插件后，在idea的工具栏中可以看到一个Genymotion的小图标，则表明Genymotion插件安装成功。
 
如果没有，你可以尝试看看idea工具栏上，view-》toolbar进行勾选。看小图标是否会出现。若还不出现，则表明Genymotion插件安装失败。
ok，插件安装完成后，你可以将工程导入进来了。
将工程导入进来以后，添加中间件。
 
 
添加完成后，请一定记着开启“Genymotion”模拟器，并启动一个虚拟机。这个时候你勾选“Specify
target”就可以下拉出你的模拟器了。点击启动服务的小图标，稍后你可以看到你的工程在模拟器中完美运行了。(十分感谢jiang ge ge的大力支持，嘿嘿)