ionic4打包android apk具体步骤及环境搭建

女爷i 2022-02-19 23:49 1052阅读 0赞

#### 环境安装 ####

node：v10.15.3  
npm：6.9.0  
ionic： CLI 4.12.0  
cordova：9.0.0  
jdk：1.8.0\_201  
gradle：5.4-rc-1

###### 1. node安装 ######

下载安装 [http://nodejs.cn/download/][http_nodejs.cn_download]

###### 2. 安装ionic cordova ######

`npm install -g cordova ionic`

检查版本： ionic -v cordova -v

###### 3. 构建android工程 ######

1.  查看支持的平台或版本：  
    `ionic cordova platform ls`
2.  构建android platform(必须在对应的ionic项目中执行)：  
    `ionic cordova platform add android`

说明：此步骤会修改ionic的目录结构，让ionic支持cordova。构建成功后，会在platforms目录下生成一个android工程。

###### 4. 配置android sdk环境 ######

1.  [安装jdk——点我查看][jdk]
2.  [安装android-sdk，这里我安装的是Android Studio，会自动安装sdk——点我查看 ][android-sdk_Android Studio_sdk_]
3.  安装gradle（下载、解压、配置环境变量）—— 具体安装步骤附文章最后

###### 5. 打包 ######

执行命令：`ionic cordova build android`  
编译成功之后，会在C:\\myApp\\platforms\\android\\app\\build\\outputs\\apk\\debug目录下生成一个 xxx.apk文件。  
![在这里插入图片描述][20190412085335776.png]

###### 6. 打包遇到的问题 ######

**问题一：**

在使用`ionic cordova build android`打包的时候出错

解决方法：

*  移除android工程：`ionic cordova platform remove android`
 *  使用命令 --nofetch 安装：`cordova platform add android --nofetch`

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70]  
**问题二：**  
在构建的ionic4项目打包的项目目录中不能出现中文，出现中文会乱码，打包不成功。

--------------------

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70 1]

--------------------

#### 打包步骤: ####

前提是配置好上述环境：

###### 1. 创建ionic4项目 ######

`ionic start myApp tabs`

###### 2. 运行项目 ######

`cd myApp`  
`ionic serve`

###### 3. 构建android platform： ######

`cordova platform add android --nofetch`

###### 4. 编译生成apk ######

`ionic cordova build/run android`

--------------------

#### gradle安装与配置 ####

###### 1. [下载地址][Link 1] ######

需要注意的是下载bin目录这个文件  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70 2]

###### 2. 下载完成之后解压到对应的目录 ######

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70 3]

###### 3. 配置环境变量 ######

*  在系统变量中新建  
    变量名：`GRADLE_HOME`  
    变量值：`C:\software\Android\gradle-5.4-rc-1` （下载的gradle的安装目录地址）  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70 4]
 *  编辑Path，加入路径如下图所示，点击保存  
    变量值：`%GRADLE_HOME%\bin;`  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70 5]

###### 4. 检验是否配置成功 ######

命令：`gradle -v`  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70 6]

[http_nodejs.cn_download]: http://nodejs.cn/download/
[jdk]: https://blog.csdn.net/yw00yw/article/details/89209770
[android-sdk_Android Studio_sdk_]: https://blog.csdn.net/yw00yw/article/details/89212124
[20190412085335776.png]: /images/20220220/9ddaebac9277420fbc18ef6e0500bb78.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70]: /images/20220220/b5c37f8b3cea4105aa88066b48c55dcb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70 1]: /images/20220220/540fe8a233ab45019f4a0a029332df11.png
[Link 1]: http://services.gradle.org/distributions/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70 2]: /images/20220220/341f8dff927749f3b9a198f53d66a188.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70 3]: /images/20220220/2b0837469c204a50b1f7e22cdc26c88d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70 4]: /images/20220220/9711c3dc28844358b41d1ec65f820260.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70 5]: /images/20220220/71ecee00395a42879ff8f8302bcda564.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70 6]: /images/20220220/10b05fb6ae67467a932233454400b036.png