IONIC3 打包安卓apk详细过程(大量图文)

(2018年8月9日 更新:更新博客中错误的地方,修改排版。)


本文写于2018年2月12日 22:25:59。

如果2018年的新春之际,你遇到IONIC的开发问题,这将是一篇最为详尽的打包方案。

经历三天的踩坑,跳坑,相信绝大多数的问题都已经覆盖到了,请仔细按照流程来对照操作及检查。

1.基本依赖环境

  1. nodejs环境 (作为一个前端相信你已经有了)
    nodejs
    最好提前配置好node的环境变量,便于全局访问。
  2. jdk(java的开发基础类库,因为 android )
    JDK
  3. SDK(安卓开发集成包,集成了安卓的开发工具,插件,API等等)
    SDK
  4. gradle( JAVA界的Weboack ,支撑app的编译,打包的流程)
    gradle

2. 基本工具

  1. gitbash(就是用来替代windows自带的丑陋的CMD)gitbash
    下载:我都打包了!
    链接:https://pan.baidu.com/s/1mje7ZHu 密码:ob6m
  2. windows自带的CMD(window+R输入CMD,管理员身份运行)CMD
  3. 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验证是否安装成功。

IONIC3 打包安卓apk详细过程(大量图文)_第1张图片

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

如图所示:

IONIC3 打包安卓apk详细过程(大量图文)_第2张图片

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

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

IONIC3 打包安卓apk详细过程(大量图文)_第3张图片

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

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

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

IONIC3 打包安卓apk详细过程(大量图文)_第4张图片

下面记得勾选。

回到主界面,点packages再点reload

先勾选如下图的三个Tools:

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

IONIC3 打包安卓apk详细过程(大量图文)_第5张图片

别急,还没完,下面还有一个:

[SDK platform]IONIC3 打包安卓apk详细过程(大量图文)_第6张图片

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

IONIC3 打包安卓apk详细过程(大量图文)_第7张图片
[ 2018/8/1 17点58分 加更 ]

  • 验证 ionic 是否安装成功
    IONIC3 打包安卓apk详细过程(大量图文)_第8张图片
    IONIC更新到 v4 了,后续我会体验一下,写一篇新博客~

2.创建ionic项目

桌面右键,在此处gitbash

$ ionic start app tabs

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

$ ionic serve

IONIC3 打包安卓apk详细过程(大量图文)_第9张图片

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

IONIC3 打包安卓apk详细过程(大量图文)_第10张图片

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

1.nodejs与gitbash没有问题。

2.ionic和cordova没有问题。

4.打包

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

$ ionic cordova build android --release

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

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

IONIC3 打包安卓apk详细过程(大量图文)_第11张图片

OK,此时你已经有了debug的包,但是这个包没有签名,不能发布。

此时,我们应该:

  1. 在JDK目录下的bin文件夹下(C:\Program Files\Java\jdk1.8.0_71\bin),先看看有没有keytool.exe和jarsigner.exe文件,这两个程序用于给APK签名,签名以后即可发布。
    IONIC3 打包安卓apk详细过程(大量图文)_第12张图片
  2. .将Ionic生成的文件先命名为app.apk,然后复制一份当前的bin目录里,执行命令1,生成自己的签名文件,名为:zhangqiang.keystrore,别名也是这个,有效期20000天,仅仅在第一次生成签名文件,以后不需要。

执行完命令1,继续执行命令2即可完成签名打包。

命令1:生成签名密钥

/*
使用工具, 签名:
-genkey表示构建签名文件

-v 显示在dos窗口中 

-alias表示签名包的别名 

-validity 签名有效期(天)

姓名:填上,用你名字拼音全拼

城市:随便填,不填也行

国家: 随便填,不填也行

密码口令:敲的时候不动,是因为保护隐私,别当做你电脑死机!
*/

在CMD窗口执行如下命令,输入秘钥确认即可生成签名文件 yourname.keystore ,

$ keytool -genkey -v -keystore [姓名].keystore -alias [姓名].keystore -keyalg RSA -validity 20000

输入如图:
IONIC3 打包安卓apk详细过程(大量图文)_第13张图片

(PS:真 · JAVA 密保)
此时按下回车,即可生成签名:
IONIC3 打包安卓apk详细过程(大量图文)_第14张图片
如果报错,说明你的 CMD 不是以管理员身份打开的,请在管理员身份下打开

命令2:给文件签名

使用刚才生成的 signer 来给 app 签名,Usage:

[姓名].keystore -signedjar 签名后的apk 签名之前的apk 签名包名(命令一生成的签名文件名)

Exeample :

$ jarsigner -verbose -keystore [姓名].keystore -signedjar complete.apk app.apk [姓名].keystore

签名
输入前面设置的密码,即可签名。

IONIC3 打包安卓apk详细过程(大量图文)_第15张图片

如上图所示,IONIC打包的文件为app.apk,签名后的文件为complete.apk,这时候,可以说,一个软件就诞生啦!

后续的软件压缩打包可以百度:jarsigner打包

5.疑难杂症

Without ·from· option PostCSS could generate wrong source map and will not find Browserslist config. Set it to CSS file path or to undefined to prevent this warning

出现这个提示,说明配置不正确。

5.1 文件引用路径错误

解决方法:

在“/node_modules/@ionic/app-scripts/dist/sass.js”路径的“sass.js”文件,在postcssOptions参数中添加“from: undefined”。添加后效果如下:

var postcssOptions = {  
        from: undefined,  
        to: path_1.basename(sassConfig.outFile),  
        map: autoPrefixerMapOptions  
    }; 

5.2 安卓SDK组件缺失/缺少/不匹配

报文:

A problem occurred configuring project ‘:CordovaLib’.
You have not accepted the license agreements of the following SDK components:
[Android SDK Build-Tools 26.0.2].

原因:SDK构建工具和platform工具不匹配,或者有东西遗漏了,没下载。

解决:如果中途报错SDK出问题,请打开C盘/profiles/SDK/manager.exe,使用东软的镜像,根绝报错信息,来down对应的platform或者build包。

5.3 缺少安卓构建/打包工具

报错报文:

Unhandled promise rejection (rejection id: 1): CordovaError: Could not
find an installed version of Gradle either in Android Studio, or on
your system to install the gradle wrapper. Please include gradle in
your path, or install Android Studio (node:3444) [DEP0018]
DeprecationWarning: Unhandled promise rejections are deprecated. In
the future, promise rejections that are not handled will terminate the
Node.js process with a non-zero exit code.

原因:缺少安卓构建打包工具,报文提示你可以用Android Studio,也可以安装一个Gradle。

解决办法:

去http://services.gradle.org/distributions/ 下载 gradle-4.1-bin.zip,下载完成解压到和JDK,SDK相同的父目录,便于将来查找(C:\Program Files\gradle-4.1)
配置相应的环境变量:

键:GRADLE_HOME
值:E:\software\gradle-3.0 (你的东西下载到哪,就填写对应的目录)

环境变量 path 中继续后缀
;%GRADLE_HOME%\bin (WIN7及以下系统注意封号,WIN 10 可以忽略)

完成上述任务后,重新运行Gitbash,然后 $ ionic cordova build android ,发现build成功,会自动下载gradle-4.1-bin.zip (初步猜测是因为自己的gradle路径不对,也可能是没有被项目依赖,但是项目在全局空间中发现gradle环境,因此自己要下载gradle来依赖。)

5.4 在安装,或者build 时没有管理员权限,导致无法写入磁盘

IONIC3 打包安卓apk详细过程(大量图文)_第16张图片
解决方法: 以管理员身份运行 CMD (commder )即可。

5.5 无法签名

jarsigner: 无法对 jar 进行签名: java.util.zip.ZipException: invalid entry compressed size (expected 7508 but got 7333 bytes)

解决办法:已经签名过了,无需再次签名。

感谢收看。

你可能感兴趣的:(angularjs,工具类)