wuhuacong(伍華聰)的專欄

在完成 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移動端的打包，然后部署在安卓的平板上的實際運行效果。