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

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

• 安装 HBuilderX
  从 DCloud 官网 下载并安装最新版本的 HBuilderX。
  建议选择 完整版，内置 uni-app 打包工具。
  
• 注册 DCloud 账号
  用于云打包，需要登录 HBuilderX。
  
• 准备安卓签名证书（可选）
  
  
  
  • 如果是测试版，可使用 HBuilderX 的 测试证书。
    
  • 如果是正式上线，建议使用自己生成的签名证书（.keystore 文件）。
    
  
  

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

• 
  
  
  
  • 填写打包信息：
    
    
    
    • App名称：显示在手机上的名称
      
    • AppID：唯一标识
      
    • 版本号 / 版本名称：用于应用市场更新
      
    • 应用图标 & 启动图：建议准备不同分辨率的图片
      
    
    
  • 选择签名方式：
    
    
    
    • 测试证书：适合调试
      
    • 自有证书：适合发布到应用商店
      
    
    
  
  

2、项目创建和相关设置

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

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

1. <template>
2.     <view class="content">
3.         
4.         <web-view src="http://www.iqidi.com:8849"></web-view>
5.     </view>
6. </template>

复制代码

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

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

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

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

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

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

接着可以看到有提示。

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

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

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

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

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

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

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

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

感谢分享，学习下。

新版吗？好像是停更了吧。

感谢分享，下载保存了，貌似很强大

新版吗？好像是停更了吧。

前排留名，哈哈哈