1.准备工作
a.下载 Node.js(下载包https://nodejs.org/en/)
查看node.js是否安装
Node -v
b.安装python(https://www.python.org/downloads/)
c.WebStorm(IDE,编写代码,浏览器调试)
d.JDK(webstorm 运行环境)
e.Android SDK (Android编译)
2.配置环境变量:
计算机→属性→高级系统设置→高级→环境变量
A.JDK环境变量
a.系统变量→新建 JAVA_HOME 变量 。
变量值填写jdk的安装目录(例 E:\Java\jdk1.7.0)
b.系统变量→寻找 Path 变量→编辑
在变量值最后输入 %JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;
(注意原来Path的变量值末尾有没有;号,如果没有,先输入;号再输入上面的代码)
c.系统变量→新建 CLASSPATH 变量
变量值填写 .;%JAVA_HOME%\lib;%JAVA_HOME%\lib\tools.jar(注意最前面有一点)
d.检验是否配置成功 运行cmd 输入 java -version (java 和 -version 之间有空格)
若显示版本信息则说明安装和配置成功。
B.SDK环境变量
a.系统变量→新建 ANDROID_HOME 变量 。
变量值填写sdk的安装目录(例 E:\sdk)
b.系统变量→寻找 Path 变量→编辑
在变量值最后输入 %ANDROID_HOME%\platform-tools;%ANDROID_HOME%\tools;
(注意原来Path的变量值末尾有没有;号,如果没有,先输入;号再输入上面的代码)
3.安装ionic等,运行命令提示符(管理员) 输入
将cordova和ionic包安装到全局环境中(可供命令行使用):
npm install -g cordova ionic
*注:由于GFW,很多插件下载不下来,我们可以使用淘宝镜像来解决这个问题:
npm install -g cnpm --registry=https://registry.npm.taobao.org
安装完成后,以后所有的插件都使用cnpm这个命令来进行安装。
cnpm install -g ionic cordova
*注:安装速度取决于你的网速,未出现ERR的错误提示说明安装成功。
4.查看cordova和ionic是否安装成功
cordova -v
ionic -v
出现版本号说明安装成功。
5.创建项目
a.进入你要创建项目的路径:
1.D:
2.cd D:\project
b.创建一个名为myApp的还有tabs的项目(ionic start <project-name> <optional-template>) 可选模板为sidemenu侧滑、tabs底部tab切换、blank空白。
ionic start myApp tabs
c.myApp就为项目名称,进入myApp这个文件夹:
cd myApp
d.添加android平台:
ionic platform add android
e.生成androidapk:
ionic build android
*注:如果提示build successful则表示安装成功。通常会出现以下情况:
1.比如它会提醒需要platform for android-22sdk,这时候就需要在网上搜索android-22sdk然后解压放在你的sdk目录里面在sdk\plantforms\然后把android-22解压后放到里面。
2.可能出现的问题是build-tools版本问题,我这个给的信息提示是必须要19.1.0及以上的版本,我就装了一个的21.0.0版本的,结果报了一堆看不懂的错误,最后还是找了一个19.1.0版本的build-tools才成功安装,在build-tools版本网上搜索然后解压到你的sdk\build-tools文件夹里就可以构建完成了。
f.在android模拟器或真机中模拟:
ionic emulate android
其中f和g可以合并为:
ionic run android
即生成apk,并在模拟器或真机中模拟。
此时搭建就已经完成了,在eclipse或者Android studio中导入文件就可以使用了。
6.更新ionic等
a.更新cordova及ionic包
npm update -g cordova ionic
b.更新已建ionic项目中的js类库,命令行中先进入项目所在目录,然后运行:
ionic lib update
7.展现ionic项目结果(显示在ios和android上的样式)
ionic serve --lab