本文写于2019年8月13日 。
如果2019年的中秋之际,你遇到IONIC的开发问题,这将是一篇最为详尽的打包方案。请仔细按照流程来对照操作及检查。
1.基本依赖环境
- nodejs环境 (作为一个前端相信你已经有了)
网址:https://nodejs.org/en/,点击进入后如下图
左边的LTS是正式版,右边的Current是测试版,一般开发常用的就是LTS正式版。 安装:双击安装包,一路下一步,路径最好别放C盘,因为我是强迫症,不喜欢C盘被乱七八糟的东西塞满。
- 安装完成后,建议再找个喜欢的地方创建一个全局包文件夹,这样你的全局包与缓存会放在这个文件夹下,比较好找。比如我的路径:
D:\software\dev\Node
- 最好提前配置好node的环境变量,便于全局访问
- jdk(java的开发基础类库,因为 android )
- SDK(安卓开发集成包,集成了安卓的开发工具,插件,API等等)
gradle( JAVA界的Weboack ,支撑app的编译,打包的流程)

2. 基本工具
gitbash(就是用来替代windows自带的丑陋的CMD)
链接:https://pan.baidu.com/s/1mje7ZHu 密码:ob6m
VSCode(微软爸爸开发的前端IDE)
下载:请自行去微软爸爸官网下载。
3.环境配置
3.1 nodejs (需要配置环境变量)
前端必会,跳过。
不会的去这里看傻瓜教程:https://www.jianshu.com/p/03a76b2e7e00
3.2 jdk (无需配置环境变量)
下载:已经上传网盘↓
链接:https://pan.baidu.com/s/1mje7ZHu 密码:ob6m
请自行根据系统安装32/64位的版本。
安装方法:下载完成,解压,直接按照提示安装,全局点确定,不出意外,最后的安装路径为:C:\Program Files\Java
OK,jdk安装完成,在cmd中,输入$ java -version验证是否安装成功。
OK。
3.3 sdk (需要配置环境变量)
下载:跟上面的一样,我都打包了。
链接:https://pan.baidu.com/s/1mje7ZHu 密码:ob6m
解压后(直接右键X解压并重命名。因为面还有个文件夹,不建议用右键+E解压)。
将重命名的文件夹,跟jdk放在一个父目录,便于查找:C:\Program Files\SDK
接着配置环境变量,我的电脑——右键属性——-高级系统设置——-环境变量。
在下面的系统变量(s)中,新建,键值对如下:
name: ANDROID_HOME
key: C:\Program Files\SDK
如图所示:
然后在path中,全局声明一下,将 ;%ANDROID_HOME%\tools 缀在最后面,前面有【;】分隔符。(注:win 10 系统不需要封号,SDK,JDK也是同理)。
然后运行CMD,输入$ android -h,如果出现一大堆指令,说明你的SDK安装无误,并且环境变量配置OK。
现在,打开SDK目录下的SDK Manager.exe
打开界面上的Tools,选择options,先配置国内镜像:
域名千万不要输入http或者https协议前缀,谁输谁哭。
下面记得勾选。
回到主界面,点packages再点reload
先勾选如下图的三个Tools:
分别是[ Android SDK Tools,Android SDK platform-tools,Android SDK Build-tools]
全部选中后,点右下角 install packages 来安装,耐心等待即可。
3.4 gradle安装(需要配置环境变量)
打开:http://services.gradle.org/distributions/
下载:gradle-4.1-bin.zip
同样安装在JDK,SDK的目录下,便于查找。
同样的配置环境变量:
GRADLE_HOME=C:\Program Files\SDK\gradle-4.1
;%GRADLE_HOME%\bin
测试命令(查看版本):gradle -v
3.基本流程
1.安装ionic和cordova
打开Gitbash,全局安装ionic和cordova(IONIC是UI,cordova负责打包成apk,并且可以调用原生安卓的各种API)
$ cnpm install -g ionic cordova
验证 ionic 是否安装成功
2.创建ionic项目
桌面右键,在此处gitbash
$ ionic start app tabs
耐心等待完成,在 cd 到 app 子目录(app是你的真实项目目录),然后
$ ionic serve
稍等片刻,浏览器自动弹出预览界面(建议电脑安装Chrome浏览器),并且支持持续热更新(Webpack的功能),如下图所示:
如果做到这一步没问题,说明:
1.nodejs与gitbash没有问题。
2.ionic和cordova没有问题。
4.打包
确保SDK,JDK没问题以后,使用指令
$ ionic cordova build android --release
- (如果这条命令有问题,可以去掉–release然后debug编译,编译完成Dos会显示apk目录位置)
如若你聪慧的双眼发现如下字眼:Build Success! 说明你已经成功打包了。耐心等待,命令行结束会提示你apk的生成位置,如图所示: