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、观赏鱼辨识应用的执行画面以及应用详情

参考资料


<<:  [Day25] 透过GCP实作(1/4):透过Cloud Function直接拉取资料

>>:  Day11 CSS基本说明

Day13 天气API小实作3

继续昨天~ 写完之後一定要task.resume!!!不然不会动作这个func 这段程序码是在写当我...

快速了解 Tailwind CSS 的 JIT 模式

线上范例:JIT 线上范例 - Tailwind Play 因为 Tailwind CSS 的设计...

Day_26 vsftpd

今天介绍另外一个古老的文件技术FTP(File Transfer Protocol)。建立一个档案s...

Day 7 - 浅谈Laravel资料库关联的运用

当数据庞大时,我们不会把所有资料都存在同一个资料表,会依照资料类型做分类,例如:使用者资料的user...

JavaScript Day 5. 型别辨识 typeof

偶尔程序也会碰到需要辨别变数的状态,有时候是用於防止使用者输入奇怪的文字,有时候是帮助自己确认变数的...