ionic开发环境配置（win环境）

ionic开发前，部署良好的开发环境是成功开发的关键，这关系到我们web页面编译完成后，是否能顺利的实现平台打包（android生产apk文件）。

第一项：系统环境配置

step1 安装jdk（androidSDK需要）

• 下载安装jdk，也就是java环境，目的是我们后面安装androidSDK需要，下载地址
• ==注意：== 下载jdk安装包时，一定要选择清楚系统适配安装包，
  安装过程一直点击next，直到安装完成，一般是装在如下路径C:\Program Files\java
• 官方说法是不需要配置环境变量，但是为了安全起见，我们也为其配置环境变量，配置方式如下：

JAVA_HOME：C:\Program Files\Java\jdk1.8.0_131
PATH：%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;

• 在“系统变量”选项区域中查看CLASSPATH 变量，如果不存在，则新建变量CLASSPATH，否则选中该变量，单击“编辑”按钮，在“变量值”文本框的起始位置添加“.;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar;”结构如下：

CLASSPATH：.;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar;

• 测试：打开CMD命令行，输入 java -version，看到版本就是安装成功了！！

  
  
  

  image

step2 安装node

• 安装nodejs环境，参考前文
• ==注意：== nodejs安装完成后，node版本切忌选择7.x以上版本，低版本ionic不适配！！在命令行运行ionic cordova install myApp 下载ionic开发模板时报错！！

step3 安装git

• 安装git环境，因为ionic开发项目很多东西都是从github上clone下来的！！git下载地址
• 下载安装完成后，环境变量配置和step1介绍的步骤一样。

step4 配置C++环境

• 下载vs2015，单独为我们的电脑配置下c++环境！Visual Studio Professional 2015简体中文版（专业版）下载地址
• 切忌，安装时，选择自定义安装，只安装c++环境。其他一律不安装！！

step5 安装androidSDK - 关键

• androidSDK安装包下载地址
• 点next安装（切忌不能安装在中文目录下！一般我们选择在c盘新建一个android文件夹安装）
• 安装完成后，配置环境变量，如下：

ANDROID_HOME：(你sdk安装路径)
PATH：;%ANDROID_HOME%\platform-tools;%ANDROID_HOME%\tools;

• 打开CMD，执行android -h，看到如下信息，安装成功。

image

• 管理员权限运行运行androidSDK安装路径下的SDK Manager.exe（也就是android管理工具），见如下界面：

image

• 一般情况下，国内服务器无法访问google服务器，所以，列表项都是空的，如果列表项有数据，则忽略下面步骤，直接跳到下载工具包：勾选3个工具包：1、Android SDK Platform-tools 2、Android SDK Build-tools 3、API23下的SDK Platform (编译的时候会提示你需要的api版本，目前是API23，具体需要哪个API-XX下的版本，在最后build android的时候会提示告知！！再选择下载就行了！我下载了22/23/25三个版本，ionic2.x和ionic1.x都可以编译成apk)

• 选择Tools - Options 打开设置界面：

  
  
  

  image
• 填入http://mirrors.neusoft.edu.cn 端口80

• 并勾选 “Force https://... sources to be fetched using http://...”单击Close关闭。如下图：

  
  
  

  image
• 依次选择Packages - Reload（或者重新打开）
• 下载工具包：勾选3个工具包：1、Android SDK Platform-tools 2、Android SDK Build-tools 3、API23下的SDK Platform (编译的时候会提示你需要的api版本，目前暂时下载API23，具体需要哪个API-XX下的版本，在最后build android的时候会提示告知！！再选择下载就行了！我下载了22/23/25三个版本，ionic2.x和ionic1.x都可以编译成apk)

• ==附加==：项目集成Crosswalk需要勾选Extras下的Android Support Repository和Google Repository否则会报错。

  
  
  

  image

• 接受，安装！！！到这步骤为止，基本的安装完成。

  
  
  

  image

step5 安装项目自动化构建工具 -- gradle！

• gradle下载地址
• gradle是编译android项目apk时候需要的工具，必须配置，不然编译时候会非常慢，甚至报错！！
• 下载安装，一般安装在我们的开发环境文件夹，本人配置在C:\dev
• 配置全局环境变量如下：

GRADLE_HOME：c:\dev\gradle-3.5（版本号不一定，目前最新3.5）
PATH：%GRADLE_HOME%\bin

• 测试gradle是否安装成功，打开cmd，执行gradle -v，看到下图表示安装成功！

  
  
  

  image
• ==注意==：在执行ionic cordova build android编译apk时，系统会自动在c盘用户文件夹生产一个.gradle的文件夹。

第二项：项目环境配置

在完成nodejs、jdk、git、c++、androidSDK、gradle系统环境配置后，接下来就可以顺利开始我们的项目环境配置了。

step1 全局安装ionic cordova

在命令行执行

npm install -g ionic cordova

• ==注意==：如果npm下载安装太慢，就换成cnpm下载安装！

• 下载完成后，执行ionic -v 和 cordova -v命令，测试是否安装成功。

  
  
  

  image

---

至此，ionic开发环境就全部搭建完毕！

---

第三项：项目创建/编译

1. cmd执行

ionic start myAPP tabs

（创建过程y/n询问是否打开官网，输入n即可）当前默认创建的ionic是ionic2；如果需要下载ionic1的项目模板，仅需执行如下命令

ionic start myAPP tabs --type=ionic1

在下载的ionic模板中编写我们的项目，项目完成后，编译项目apk

2. 编译需要先添加platform平台

ionic cordova platform add android

（ionic cordova platform rm android移除平台 平台大概20M迁移项目时候删掉更恰当）

3. 编译apk：

ionic cordova build android

（第一次编译要下载gradle-2.2.1-all.zip和jar 如果gradle-2.2.1-all.zip下载太慢换个时间段再尝试！！前面我们已经手动下载并全局环境配置了gradle，这里就会快很多，不过，也要看时段！！）