你的位置:首页 > 网页设计

[网页设计]Ionic开发环境搭建


Ionic开发环境搭建

1.安装jdk

1.1.安装【jdk-8u60-windows-x64.exe】到【C:\Program Files\】目录

 

1.2.jdk下载地址

http://www.oracle.com/technetwork/java/javase/downloads/index-jsp-138363.html

或者百度一下jdk

2.安装adt

2.1.解压【adt-bundle-windows-x86_64-20140702.zip】到【D:\Program Files\】

 

2.2.adt下载地址

http://www.androiddevtools.cn/

3.安装ant

3.1.解压【apache-ant-1.9.6-bin.zip】到【D:\Program Files\】

 

3.2.ant下载地址

http://ant.apache.org/

4.配置环境变量

4.1.添加系统变量

添加以下系统变量

JAVA_HOME

C:\Program Files\Java\jdk1.8.0_60

 

ANDROID_HOME

D:\Program Files\adt-bundle-windows-x86_64-20140702\sdk

 

ANT_HOME

D:\Program Files\apache-ant-1.9.6

 

步骤请参考下图

右键【我的电脑】——》【属性】——》【高级系统设置】——》【环境变量】

 

【新建】——》输入【变量名】和【变量值】——》【确定】

PS:JAVA_HOME、ANDROID_HOME、ANT_HOME都要执行该步骤一次

 

添加完JAVA_HOME、ANDROID_HOME、ANT_HOME结果如下

 

4.2.修改PATH变量

%ANDROID_HOME%\platform-tools;

%ANDROID_HOME%\tools;

%JAVA_HOME%\bin;

%ANT_HOME%\bin;

 

将以下字符串追加到【Path】变量的变量值的最后面

【;%ANDROID_HOME%\platform-tools;%ANDROID_HOME%\tools;%JAVA_HOME%\bin;%ANT_HOME%\bin;】

 

【确定】

 

5.安装Node.js

5.1.下载地址

https://nodejs.org/

6.安装ionic

6.1.安装ionic cli

打开命令行,执行以下命令:

【npm install -g cordova ionic】

6.2.创建项目

打开命令行,依次执行以下命令:

【ionic start myApp tabs】

【cd myApp】

【ionic platform add android】

6.3.打包apk

打开命令行,执行以下命令:

【ionic build android】

提示打包成功后,可以在以下目录找到对应的apk:

【D:\Dev\Projects_Test\myApp\platforms\android\build\outputs\apk\】

7.打包报错可能的原因及其解决方案

7.1.目录中包含中文字符

解决方案:将项目放到不含中文字符的目录中,再打包

7.2.安装了与操作系统不对应的jdk

例如,你本来是win10 64位操作系统,但是你安装的是win7 32位的jdk

解决方案:删除jdk,到官网下载与操作系统对应的jdk再安装

7.3.持续更新中...