目录

一、概述

二、详解

三、拓展

---

一、概述

App采用混合开发模式，技术选型为Vue+Vant，本文详细研究项目打包Apk的流程。Vue项目打包Apk有两种最常用的方法，其一使用Dcloud-HbuilderX打包Apk，其二使用Cordova打包Apk。

注意，本文只介绍HbuilderX打包，Cordova忽略。

二、详解

第一步：下载HbuildX

如下图所示，下载HbuilderX，地址为：https://www.dcloud.io/。

第二步：项目设置publicPath

Vue项目打包前，需设置vue.config.js文件中的publicPath属性，如下图所示。注意，如果不设置publicPath属性，则手机安装Apk后，打开项目可能出现空白页面。

module.exports = {
    publicPath: './',
}

第三步：项目编译

使用如下命令编译项目，成功后把dist文件夹复制到HbuilderX。

> npm run build

第四步：向dist文件夹中添加manifest.json（App的配置文件）

dist文件夹中需要添加一个manifest.json文件，该文件可以使用HBuilderX创建一个5+app项目来获取，如下图所示。

第五步：修改manifest.json文件

manifest.json文件是App的配置文件，参考链接：https://ask.dcloud.net.cn/article/94。

第六步：云端打包

三、拓展

拓展1：Android数字证书介绍

打包Apk时，需要使用数字证书（.keystore文件）进行签名。数字证书是开发者的身份标识，用于表明开发者身份，使用同一个证书签发的App，默认属于同一个开发者。

Android证书的生成是自助和免费的，不需要审批或付费，创建证书时，需要注意以下问题。

1、证书文件密码（storepass）和证书密码（keypass）必须一致
2、证书别名使用英文字母或数字（老版本HBuilder不支持使用中文别名）
3、证书名称建议使用英文字母或数字，避免使用中文

参考资料：https://ask.dcloud.net.cn/article/35985

拓展2：生成Android数字证书

Windows平台可以使用命令行生成证书，前提是必须提前安装JDK。参考资料：https://ask.dcloud.net.cn/article/35777。

如下代码所示，使用keytool -genkey命令生成数字证书。其中testalias是证书别名，可自定义，建议使用英文字母和数字。test.keystore是证书名称，可自定义，建议使用英文字母和数字。

> keytool -genkey -alias testalias -keyalg RSA -keysize 2048 -validity 36500 -keystore test.keystore

数字证书生成后，全局搜索证书位置即可。可使用如下命令查看数字证书内容，其中test.keystore是证书名称。

> keytool -list -v -keystore test.keystore  

数字证书也可以在线生成，地址：http://www.applicationloader.net/appuploader/keystore.php。

拓展3：App桌面图标设置

使用HbuilderX打包时，设置App图标。

拓展4：设置沉浸状态栏

使用HbuilderX打包时，设置沉浸状态栏。打开项目的manifest.json文件，切换到代码视图，在plus -> statusbar下添加immersed节点，并设置为true。

自定义状态栏颜色，参考链接：https://ask.dcloud.net.cn/article/94。

拓展5：解决手机点一次返回键退出应用的Bug

使用HbuilderX打包Vue时，解决手机点一次返回键直接退出应用的Bug。如下代码所示，在入口文件index.html中添加如下代码。

<script type="text/javascript">
    document.addEventListener('plusready', function(a) { //等待plus ready后再调用5+ API：
       在这里调用5+ API
      var first = null;
      plus.key.addEventListener('backbutton', function() { //监听返回键
        //首次按键，提示‘再按一次退出应用’
        if (!first) {
          first = new Date().getTime(); //获取第一次点击的时间戳
          // console.log('再按一次退出应用');//用自定义toast提示最好
          // toast('双击返回键退出应用'); //调用自己写的吐丝提示 函数
          plus.nativeUI.toast("双击退出", {duration:'short'}); //通过H5+ API 调用Android 上的toast 提示框
          setTimeout(function() {
            first = null;
          }, 1000);
        } else {
          if (new Date().getTime() - first < 1000) { //获取第二次点击的时间戳, 两次之差 小于 1000ms 说明1s点击了两次,
            plus.runtime.quit(); //退出应用
          }
        }
      }, false);
    });
</script>