使用HBuilderX把Vue3+Vant4的H5端应用打包为安卓App应用程序

在完成 Vue3 + H5 的移动端开发后，如果希望生成一份可以直接安装到手机上的 安卓 APK 程序，可以借助 HBuilderX 来完成。使用 HBuilderX 可以快速将 Vue3 + H5 项目打包成安卓应用，无需复杂的原生开发环境，非常适合前端快速交付移动端应用。测试阶段用默认证书即可，正式发布需使用自有证书。本篇随笔介绍基于已有的H5端应用，打包发布安卓 APK 程序，然后部署在安卓的平板上的实际运行效果。

1、准备工作

1. 安装 HBuilderX
   从 DCloud 官网 下载并安装最新版本的 HBuilderX。
   建议选择 完整版，内置 uni-app 打包工具。

2. 注册 DCloud 账号
   用于云打包，需要登录 HBuilderX。

3. 准备安卓签名证书（可选）

   1. 如果是测试版，可使用 HBuilderX 的 测试证书。

   2. 如果是正式上线，建议使用自己生成的签名证书（.keystore 文件）。

　　　4、发行 → 原生App-云打包

• • 填写打包信息：

    • App名称：显示在手机上的名称

    • AppID：唯一标识

    • 版本号 / 版本名称：用于应用市场更新

    • 应用图标 & 启动图：建议准备不同分辨率的图片

  • 选择签名方式：

    • 测试证书：适合调试

    • 自有证书：适合发布到应用商店

2、项目创建和相关设置

首先需要创建一个默认模板的空白项目，如下所示。

然后我们修改项目的起始文件【pages\index\index.vue】, 指定它加载的时候，转到我们的H5端地址页面即可。

如我们修改起始的视图页面，让它加载一个webView视图加载我们制定的H5段的URL即可。

<template>
    <view class="content">
        <!-- 移动APP端访问的H5端地址 -->
        <web-view src="http://www.iqidi.com:8849"></web-view>
    </view>
</template>

 

设置项目的基础信息和图标信息。

图标信息，则是选择一个已有的图标，然后让工具生成其他规格尺寸的图标即可。

 

3、项目云打包为安装文件

在HBuilderX的项目视图中，找到【发行】【App-Andriod/iOS-云打包】菜单执行

在弹出的界面中进行选择对应的功能选项即可进行打包

 如果一切顺利，那么确认后，HBuilderX工具会转到控制台进行提示打包的状态，如下所示。

接着可以看到有提示。

可以打开连接进行在线查看队列。如果不差钱，可以购买打包服务进行快速的打包。

如果需要免费打包，那么等待一段时间即可成功打包安卓APP的APK文件。

 打开目录后，就可以看到完成的安卓App 安装文件APK。

 大功告成后，我们把该文件发送到手机端或者IPAD端（Android平台）进行运行安装即可。这样安装后，我们看到的APP就和原生的样子没有太多的差异了，这种方式比扫码或者打开连接的方式，运行程序更加的方便。

4、程序在IPAD端的运行效果 

 打包完成后，通过微信或者QQ传文件到安卓的平板，以OPPO的平板进行测试。单击安装的APK文件安装，提示信息如下，确认继续安装即可。

安装后，在应用图标上会增加我们刚刚新增的APP，单击运行即可看到熟悉的启动界面效果了。

 以上就是利用HBuilder进行H5移动端的打包，然后部署在安卓的平板上的实际运行效果。