IONIC3 环境安装及打包安卓apk详细过程(大量图文说明)

本文详细介绍了使用IONIC和cordova进行应用开发与打包的全过程,包括环境搭建、工具选择、配置流程及常见问题解决,适合中秋期间遇到打包难题的开发者。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

 

本文写于2019年8月13日 。

如果2019年的中秋之际,你遇到IONIC的开发问题,这将是一篇最为详尽的打包方案。请仔细按照流程来对照操作及检查。

1.基本依赖环境

  1. nodejs环境 (作为一个前端相信你已经有了)                                                                                                                                               
    nodejs                                                                                                                                                                                     网址:https://nodejs.org/en/,点击进入后如下图è¿éåå¾çæè¿°                                                                             左边的LTS是正式版,右边的Current是测试版,一般开发常用的就是LTS正式版。                                                                    安装:双击安装包,一路下一步,路径最好别放C盘,因为我是强迫症,不喜欢C盘被乱七八糟的东西塞满。
  2. 安装完成后,建议再找个喜欢的地方创建一个全局包文件夹,这样你的全局包与缓存会放在这个文件夹下,比较好找。比如我的路径:D:\software\dev\Node这里写图片描述
  3. 最好提前配置好node的环境变量,便于全局访问                                                                                                                         
  4. jdk(java的开发基础类库,因为 android )                                                                                                                                                   
    JDK
  5. SDK(安卓开发集成包,集成了安卓的开发工具,插件,API等等) 
    SDK

gradle( JAVA界的Weboack ,支撑app的编译,打包的流程)            
gradle

2. 基本工具

gitbash(就是用来替代windows自带的丑陋的CMD)

gitbash

链接:https://pan.baidu.com/s/1mje7ZHu 密码:ob6m

VSCode(微软爸爸开发的前端IDE)VSCode 
下载:请自行去微软爸爸官网下载。

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验证是否安装成功。

jdkå®è£æå

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

如图所示:

SDKç¯å¢åé

然后在path中,全局声明一下,将 ;%ANDROID_HOME%\tools 缀在最后面,前面有【;】分隔符。(注:win 10 系统不需要封号,SDK,JDK也是同理)。

然后运行CMD,输入$ android -h,如果出现一大堆指令,说明你的SDK安装无误,并且环境变量配置OK。

ANDROIDç¯å¢éç½®éªè¯

现在,打开SDK目录下的SDK Manager.exe

打开界面上的Tools,选择options,先配置国内镜像:

域名千万不要输入http或者https协议前缀,谁输谁哭。

éç½®éå

下面记得勾选。

回到主界面,点packages再点reload

先勾选如下图的三个Tools:

分别是[ Android SDK Tools,Android SDK platform-tools,Android SDK Build-tools]

Tools

SDK platform

全部选中后,点右下角 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åcordova

验证 ionic 是否安装成功 

ionicéªè¯

2.创建ionic项目

桌面右键,在此处gitbash

$ ionic start app tabs

耐心等待完成,在 cd 到 app 子目录(app是你的真实项目目录),然后

$ ionic serve

ionic serve

稍等片刻,浏览器自动弹出预览界面(建议电脑安装Chrome浏览器),并且支持持续热更新(Webpack的功能),如下图所示:CHROMEé¢è§

如果做到这一步没问题,说明:

1.nodejs与gitbash没有问题。

2.ionic和cordova没有问题。

4.打包

确保SDK,JDK没问题以后,使用指令

$ ionic cordova build android --release
  • (如果这条命令有问题,可以去掉–release然后debug编译,编译完成Dos会显示apk目录位置)

如若你聪慧的双眼发现如下字眼:Build Success! 说明你已经成功打包了。耐心等待,命令行结束会提示你apk的生成位置,如图所示:location

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值