iT邦幫忙

2021 iThome 鐵人賽

DAY 25
0
AI & Data

觀賞魚辨識的YOLO全餐系列 第 25

Day 25 - HBuilder X 產生 apk

Day 25 - HBuilder X 產生 apk

使用 HBuilder X 來開發手機端應用,原則上需要包含這幾個步驟

  1. 下載開發工具並安裝
  2. 註冊 dcloud 開發帳號
  3. 新增項目
  4. 設定 Andriod 組態
  5. 透過雲端進行編譯成apk
  6. 修改手機設定並安裝apk

下載開發工具並安裝

打開本地瀏覽器,輸入 HBuilderX 官方網站的網址 https://hx.dcloud.net.cn/ ,根據自己的作業系統,下載開發工具並安裝,如下圖所示,在 MacOSX 安装 HBuilderX。

https://ithelp.ithome.com.tw/upload/images/20210925/20129510RzaMQkeHdA.png
圖 1、MacOSX 安装 HBuilderX

註冊 dcloud 開發帳號

請參考 Day 24 - 設定開發帳號 HBuilder X - DCloud 註冊

新增項目

打開 HBuilderX ,在主畫面的右下方會顯示未登錄,單擊未登錄後會彈出登錄視窗,接著輸入 dcloud 的帳號,進行登錄。

https://ithelp.ithome.com.tw/upload/images/20210925/201295100wRPrSLCTO.png
圖 2、在 HBuilderX 中登錄 dcloud 帳號

接著在 文件 工具列中選擇 新建 -> 1.項目,如下圖所示。

https://ithelp.ithome.com.tw/upload/images/20210925/20129510YKiR3NgP0b.jpg
圖 3、HBuilderX 中新增一個項目

新增 HBuilderX 項目時,要注意設定必須正確,項目種類為 5+App,項目名稱必須要跟先前 dcloud 開發帳號中的 應用名稱 一樣,這樣在 HBuilderX 中新增項目後, dcloud 會將先前的 應用名稱 所分配的 App id 放到新建立項目的 manifest.json 檔案中。

https://ithelp.ithome.com.tw/upload/images/20210925/20129510Qw9c0RI1OV.png
圖 4、HBuilderX 中新增項目的設定

打開 manifest.json 檔案進行設定,HBuilderX 會轉換成功能欄式的顯示,如果要看原始檔案內容,可以點擊左方功能導覽列的最後一個 原碼視圖,首先先設定基礎配置

  • 應用標識 (AppID):這個編號來自 dcloud ,是做為前後端 (HBuilderX/DCloud) 識別之用。
  • 應用名稱:這會顯示在安裝後的圖示下的名稱。
  • 應用入口頁面:因為這是以網頁為基礎的編碼方式,所以要指定啟動入口網頁,預設為 index.html。
  • 應用描述:說明應用程式的功能。

https://ithelp.ithome.com.tw/upload/images/20210925/20129510MDxL18CJcl.png
圖 5、manifest.json 的基礎配置

接下來是設定手機應用的圖標, HbuilderX 提供一個簡單的介面,只要提供一張 1024*1024 的 png 圖檔,系統會自動轉換成個種尺寸的圖標,所以只要在 自動生成圖標 的欄位中,指定圖片所在位置,點擊 自動生成所有圖標並替換 ,系統就會修改 manifest.json 相關的圖標設定,並在 unpackage/res/icons 文件夾中產生相關圖標。

https://ithelp.ithome.com.tw/upload/images/20210925/20129510UQAclZrT7n.png
圖 6、manifest.json 的圖標配置

接下來是權限配置,主要的考量是這個應用程式需要存取到手機的何種資源,以本例來說,需要存取的是相機以及相簿,還有 wifi 無線上網功能,這時就可以到權限配置這個頁面來一一勾選,但因為相關權限過於分散,無法在一個截圖中顯示,所以就直接在原碼視圖中觀看所設定的相關權限,如下圖所示。

https://ithelp.ithome.com.tw/upload/images/20210925/201295101Mv1cUOxLr.png
圖 7、manifest.json 的權限配置

雲打包項目

設定完畢後,在項目上方按左鍵(或是雙指點擊 - MacOS),顯示功能選單後選擇 發行 -> 原生app-雲打包,如下圖所示。

https://ithelp.ithome.com.tw/upload/images/20210925/20129510IAXmLyu8l6.png
圖 8、在特定項目中進行雲打包

進入手機應用雲打包組態畫面,組態如下:

  • 勾選 Android (apk包)
  • Android包名: io.dcloud.***** ,這跟 dcloud 帳號內的設定必須一致。
  • Android證書:使用公共測試證書 ,這跟 dcloud 帳號內的設定必須一致
  • 渠道包:這是打包後希望可以在哪些渠道發佈的,因為我們只是練習,所以就都沒選。
  • 勾選 正式打包,其實合理來說應該是選 打自定義調適基座,也就是說要上傳到手機進行除錯測試,這可視個人需求選擇。
  • 勾選 傳統打包,這個比較簡單,如果選 安心打包 ,還得安裝額外工具包。

確定無誤後,點擊 打包。組態設定畫面如下圖。

https://ithelp.ithome.com.tw/upload/images/20210925/20129510shhqNS84Yj.png
圖 9、手機應用雲打包組態畫面

會彈出一個警告畫面,如下圖。

https://ithelp.ithome.com.tw/upload/images/20210925/20129510lH2f9alDO2.png
圖 10、打包校驗警示畫面

接著會在 HBuilderX 下方出現控制台畫面,顯示打包進度,打包完成後會出現一個鏈結,可以根據這個鏈結來下載打包好的 apk 。

https://ithelp.ithome.com.tw/upload/images/20210925/20129510z679ra3qKU.png
圖 11、在終端機中顯示打包進度

為了下載方便,我們將這個鏈結轉換成二維碼,這樣就可以在手機端直接掃描下載了。找到一個線上轉換二維碼的網站,輸入鏈結即可。

https://ithelp.ithome.com.tw/upload/images/20210925/20129510whIIp4PXhU.png
圖 12、將鏈結轉換成二維碼
(二維碼有用馬賽克後製處理過,所以是沒辦法掃的,但原網站的是可以的)

手機下載安裝

接下來的操作就是在手機端,筆者所使用的是小米手機,而小米安裝未知應用權限解除的方法如下:

  1. 打開手機的「設置」。
  2. 點擊「隱私保護」按鈕。
  3. 點擊「保護隱私」。
  4. 點擊「特殊權限設置」按鈕。
  5. 點擊「安裝未知應用」。
  6. 選擇要解除權限的應用,選 瀏覽器
  7. 打開「允許來自此來源的應用」開關即可。

下圖左邊為選擇要解除權限的應用,選 瀏覽器,右邊為設定畫面,打開「允許來自此來源的應用」開關。

https://ithelp.ithome.com.tw/upload/images/20210925/20129510QwOeS1aGpu.png
圖 13、解除小米安裝未知應用的權限

透過掃碼工具下載打包好的 apk ,掃碼工具預設會打開 瀏覽器 來進行下載與安裝工作,下圖顯示整個安裝過程中的提示,安裝完畢後會出現先前設定好的圖示以及應用名稱。

https://ithelp.ithome.com.tw/upload/images/20210925/201295106c17Z0Bewo.png
圖 14、透過瀏覽器來安裝應用的畫面

直接單擊 CWA 觀賞魚辨識 圖示後會出現下圖左邊畫面,那是 HBuilderX 建立的 5+app 項目的預設畫面,而右手邊則是長按圖示後選看應用詳情,就可以看到先前的設定,都會出現在這個畫面中。

https://ithelp.ithome.com.tw/upload/images/20210925/20129510ZjwJGVQSd1.png
圖 15、觀賞魚辨識應用的執行畫面以及應用詳情

參考資料


上一篇
Day 24 - 設定開發帳號 HBuilder X - DCloud 註冊
下一篇
Day 26 - HBuilderX 與 Native.js API 讀取圖片
系列文
觀賞魚辨識的YOLO全餐38

尚未有邦友留言

立即登入留言