使用ionic与cordova（phonegap）进行轻量级app开发前的环境配置与打包安卓apk过程记录

 前言

有人说：“如果你恨一个人，就让ta去接触cordova（phonegap）”，这是因为这里面的水很深，坑很多，真让人不是一般地发狂。或许有幸运的人儿基本顺顺利利就配置完环境并且成功打包安卓apk或者ios的ipa，像我这样没有运气也没有大神前辈指教，只能在摸索中一而再再而三地体验绝望到希望，再由希望到绝望的心情了，最糟的一次是到了重装系统的地步！！环境配置多了修改多了，乱得不要不要的！！不多说了，下面分享我使用ionic与cordova（phonegap）进行轻量级app开发前的比较顺利的环境配置过程。

不知道怎么操作命令行的可以快速看下这篇文章：http://jingyan.baidu.com/article/5552ef473e2df6518ffbc916.html

步骤一：安装node.js   

去nodejs官网下载nodejs最新版本，地址：https://nodejs.org/en/ （这里官网会根据当前访问网页电脑的操作系统自动提供版本！选择最新版下载即可！）

1.下载好以后点击安装，安装在哪个盘都可以 安装的时候选择 add to path 安装 ，一直next即可，nodejs系统变量会自动配置好，在系统环境变量path(PATH)中你会看到。

2.安装完毕，打开命令窗口（快捷键win+r，win是有四个格子的系统图标的按键，接着输入cmd回车即可） ，输入 node -v 会提示nodejs 版本 说明nodejs安装成功；

 步骤二：安装java jdk

      1、下载jdk，下载地址：http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

2、安装及配置java jdk环境，可以百度，有很多教程，个人比较喜欢这篇：Windows 7下java SDK下载、安装及环境变量设置_百度经验，写得全，特别是注意标点符号别遗漏了，根据步骤配置成功了：

http://jingyan.baidu.com/article/e5c39bf5a418e439d76033ee.html

        有点小建议，就是可以在用户变量中设置跟系统变量中一模一样的path，防止有时候出现莫名其妙的错误。

      3、检验java sdk是否安装以及环境配置成功，依次在命令行运行命令：java -version、java、javac，结果顺利返回一大堆文字并且没有报错，即成功了。

步骤三：安装android sdk

      按理说应该是去下载android sdk 了，但是因为sdk 下载比较困难而且配置起来步骤也比较多；所以这里我用的android adt 集成包，这里边的android sdk都是更新好的初学者可以不用更新；下载页面：http://bbs.phonegap100.com/thread-1456-1-1.html 这个页面里边有百度云盘adt下载；下载完成以后找到adt 文件夹 复制；随便找一个盘在根目录下新建一个文件夹（文件夹一定要用英文命名，不然后边配置环境变量的时候会出错！）然后粘贴把复制的adt文件 粘贴到这个新建的文件夹中；我这里是放在D盘的的根目录下的phoengap文件夹；

如图： 
      

这时候开始配置adt的环境变量，和刚才配置java jdk变量差不多，右击我的电脑选择 –>> 属性 –>>高级系统设置 –>>高级 –>>环境变量 。

1.在系统变量中新建 
        变量名： ANT_HOME 
        变量值： D:\phonegap\adt\eclipse\plugins\org.apache.ant_1.8.3.v201301120609（org.apache.ant_1.8.3.v201301120609的路径）

2.在系统变量中查找 Path 编辑 ，在原有的系统变量中添加如下变量值 
         变量名： Path（PATH）
         变量值： D:\phonegap\adt\sdk\tools;D:\phonegap\adt\sdk\platform-tools;%ANT_HOME%\bin(sdk下的tools和platform-tools文件夹路径，另外需注意：如果是win7的话 每个目录一定要用小写英文分号隔开！)

现在配置完成；和刚才一样找到命令窗口： 输入 ant 回车 ，如图：出现BuildFile: build.xml does not exist! build failed，说明ant安装配置成功！或者在命令提示符中输入“ant -v”，若出现版本号，证明安装成功。

打开ant集成文件夹，你会发现没有AVD Manager.exe启动模拟器，因此需要自己百度下载android-sdk_r24.4.1-windows.zip，

地址：http://tools.android-studio.org/index.php/sdk

解压得到AVD Manager.exe并且复制到D:\phonegap\adt\sdk（adt里的sdk中，与tools保持同级），虽然不太清楚通过虚拟器运行ionic项目是不是需要AVD Manager.exe，以防万一出现缺乏模拟器的报错吧。

步骤四：安装 cordova ionic 

       1、输入 npm install -g cordova ionic 回车 ，安装比较慢需要多等一会，警告不用管，只要不报错就等他继续安装。

2、安装完成以后可以分别 输入 cordova -v 和 ionic -v 来查看版本信息 ，全局安装成功，如图：

步骤五：创建、运行ionic项目以及打包安卓apk

3、现在就可以创建项目了，首先我们先切换到自己想要把项目创建在的 那个盘 ，这里我把项目也创建在了E：盘下的xampp文件下的apache管理下的xampp的htdocs下

然后输入 ionic start myApp tabs 回车

这里myApp 就是项目名称，tabs是ionic项目初始模板，当然还有其他类型

       ionic start myApp tabs //创建带有top栏和bottom栏的示例项目

       ionic start myApp sidemenu //创建带有左侧带有menu栏的示例项目

       ionic start myApp blank //创建空白项目

运行后你可能没有报错，但是也可能像我这样出现坑了，明明跟别人一样环境都配置好了，在创建项目的过程中却出现报错，但是项目也建立出来了！看图！

心有点凉，做我们这行的真心不喜欢看到报错，进去项目目录下，发现Myapp文件夹，一丝欣慰.......

4、尝试通过命令行进入已经创建的ionic项目，只有进去了才可以继续后续操作，命令行输入：cd Myapp（你的项目名称），进去到项目里，接着试试ionic项目能否运行，通过ionic serve可以调用默认浏览器打开你创建的ionic项目，不过，坑来了！找不到某个文件！无法识别你当前的是否为ionic项目！

出坑方法:找到c盘里的用户文件夹（user）下的Administrator,你会发现里面生成了一个.ionic文件夹，打开会看到ionic.config

复制该文件到你的ionic项目里并且添加后缀.json

再运行一次ionic serve，你以为谷歌浏览器自动打开并且你能看到你的ionic项目了？如果你行，运气不错，反正我没那么好运气，出现报错没有找到某个模块文件！幸运的是有提示运行npm install，这是我nodejs出现问题吗，可是前面正常呀，nodejs安装与环境都配置成功了呀，不思其解一......

运行完毕后，再一次运行ionic serve，成功运行，谷歌浏览器自动打开并且你能看到你的ionic项目了

除此之外，可以通过使用可视化操作工具ionic lab来创建和操作项目，不需使用命令行，破解版下载地址：https://pan.baidu.com/s/1pKI6Aan

安装打开操作如图所示：

5、项目出来了，释怀多了，接着就是打包apk和ipa了，先撸撸apk吧~~~

先为项目添加安卓平台： ionic platform add android

顺利完成，项目里也多了2个文件夹，心里一丝清凉，也到了紧张的时候，最后一步啦，创建apk~~

6、命令行输入 ionic build android

有可能出现以下情况：

一切似乎顺利，等啊等下载，如果最后你的情况一直维持这个状态的话，恭喜你，又掉坑了，这是下载超时或者下载错误？！

爬坑方法：

按ctrl+c再输入y回车终止执行命令行；

首先自己下载gradle-2.14.1-all.zip放在项目的platforms\android\gradle路径下 ，下载地址：http://download.csdn.net/detail/t6546545/9544638

当然，你可能遇到坑中坑，没有gradle文件夹！！！去别人能运行的ionic项目里找个复制过来吧，或者把整个platforms复制过来替换你项目里的platforms文件夹.....

然后在命令行里然后 set CORDOVA_ANDROID_GRADLE_DISTRIBUTION_URL=../gradle-2.14.1-all.zip

再执行ionic build android

一切又开始顺利执行了~~~

仔细看几遍，涉及到文件gradle-wrapper.properties，以及提示没有合适的环境或者OS来创建项目，从三方面考虑：

1、gradle-wrapper.properties文件是用来使用gradle.zip的，应该是缺乏相关配置，奇怪的是别人的教程没有这方面呀

2、合适的环境？前面已经检验了，nodejs、javajdk、ant环境都ok，那是安卓tools以及安卓API方面出了问题？需要打开打开adt集成文件夹里的SDK Manager.exe，查看sdk的相关配置情况

3、缺乏OS文件或文件夹或系统环境，什么鬼？

也有人说，这报错是正常的，因为cordova的最新版本会报这个错，通过命令行下载的是最新的cordova，要降版本

OK！一个个试试~~

  步骤六：爬坑

1、打开ionic项目，gradle-wrapper.properties，设置路径

再运行 ionic build android，然并卵.....

2、降低cordova版本，命令行回到c盘，输入npm install -g cordova@5.4.0

改版成功，回到项目里输入 ionic build android，然并卵.....

3、匹配ionic项目版本与安卓版本、API等一致

找到project.properties，更改匹配版本（注意多找找，有两个project.properties）

打开adt集成文件夹里的SDK Manager.exe，可以看到sdk的相关配置情况，Updata为更新，installed为已安装，在这里可以选择安装和卸载相关的Tools、安卓API和Extras

检查和下载需要的tools、API以及Extras，下载会遇到无法下载，因为需要镜像下载

点击菜单栏Tools -> Options 弹出 Android SDK Manager – Settings 窗口，设置代理镜像设置，设置值如下：

HTTP Proxy Server :  android-mirror.bugly.qq.com

HTTP Proxy Port : 8080

按照如图的顺序，依次输入、选择、点击：

下载需要的tools、API以及Extras

此处下载API 23是示范，根据所需下载API

至此版本问题应该配置完了，再次尝试ionic build android或者cordova build android，一切又有希望开始顺利运行了。

此处下载gradle又遇到超时下载问题，按照前面说的方法解决。

继续ionic build android 或者cordova build android，一堆文字后又报错啦，错误一致！！！！！

初步估计是因为gradle.zip解压和使用的时候出了问题，目前还没能爬出这个坑，ionic&cordova之路漫漫修远兮，吾将上下而求索，为API生，为框架死，为debug奋斗一辈子，吃符号亏，上大小写的当，最后死在需求上。

待续......