Day 25 - HBuilder X 产生 apk_hbuilderx生成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。

图 1、MacOSX 安装 HBuilderX

注册 dcloud 开发帐号

请参考 Day 24 - 设定开发帐号 HBuilder X - DCloud 注册 。

新增项目

打开 HBuilderX ，在主画面的右下方会显示未登录，单击未登录后会弹出登录视窗，接着输入 dcloud 的帐号，进行登录。

图 2、在 HBuilderX 中登录 dcloud 帐号

接着在 文件 工具列中选择 新建 -> 1.项目，如下图所示。

图 3、HBuilderX 中新增一个项目

新增 HBuilderX 项目时，要注意设定必须正确，项目种类为 5＋App，项目名称必须要跟先前 dcloud 开发帐号中的 应用名称 一样，这样在 HBuilderX 中新增项目后， dcloud 会将先前的 应用名称 所分配的 App id 放到新建立项目的 manifest.json 档案中。

图 4、HBuilderX 中新增项目的设定

打开 manifest.json 档案进行设定，HBuilderX 会转换成功能栏式的显示，如果要看原始档案内容，可以点击左方功能导览列的最后一个 原码视图，首先先设定基础配置

• 应用标识 (AppID)：这个编号来自 dcloud ，是做为前后端 (HBuilderX/DCloud) 识别之用。
• 应用名称：这会显示在安装后的图示下的名称。
• 应用入口页面：因为这是以网页为基础的编码方式，所以要指定启动入口网页，预设为 index.html。
• 应用描述：说明应用程式的功能。

图 5、manifest.json 的基础配置

接下来是设定手机应用的图标， HbuilderX 提供一个简单的介面，只要提供一张 1024＊1024 的 png 图档，系统会自动转换成个种尺寸的图标，所以只要在 自动生成图标 的栏位中，指定图片所在位置，点击 自动生成所有图标并替换 ，系统就会修改 manifest.json 相关的图标设定，并在 unpackage/res/icons 文件夹中产生相关图标。

图 6、manifest.json 的图标配置

接下来是权限配置，主要的考量是这个应用程式需要存取到手机的何种资源，以本例来说，需要存取的是相机以及相簿，还有 wifi 无线上网功能，这时就可以到权限配置这个页面来一一勾选，但因为相关权限过于分散，无法在一个截图中显示，所以就直接在原码视图中观看所设定的相关权限，如下图所示。

图 7、manifest.json 的权限配置

云打包项目

设定完毕后，在项目上方按左键（或是双指点击 - MacOS），显示功能选单后选择 发行 -> 原生app-云打包，如下图所示。

图 8、在特定项目中进行云打包

进入手机应用云打包组态画面，组态如下：

• 勾选 Android (apk包)
• Android包名： io.dcloud.＊＊＊＊＊ ，这跟 dcloud 帐号内的设定必须一致。
• Android证书：使用公共测试证书 ，这跟 dcloud 帐号内的设定必须一致
• 渠道包：这是打包后希望可以在哪些渠道发布的，因为我们只是练习，所以就都没选。
• 勾选 正式打包，其实合理来说应该是选 打自定义调适基座，也就是说要上传到手机进行除错测试，这可视个人需求选择。
• 勾选 传统打包，这个比较简单，如果选 安心打包 ，还得安装额外工具包。

确定无误后，点击 打包。组态设定画面如下图。

图 9、手机应用云打包组态画面

会弹出一个警告画面，如下图。

图 10、打包校验警示画面

接着会在 HBuilderX 下方出现控制台画面，显示打包进度，打包完成后会出现一个链结，可以根据这个链结来下载打包好的 apk 。

图 11、在终端机中显示打包进度

为了下载方便，我们将这个链结转换成二维码，这样就可以在手机端直接扫描下载了。找到一个线上转换二维码的网站，输入链结即可。

图 12、将链结转换成二维码
（二维码有用马赛克后制处理过，所以是没办法扫的，但原网站的是可以的）

手机下载安装

接下来的操作就是在手机端，笔者所使用的是小米手机，而小米安装未知应用权限解除的方法如下：

1. 打开手机的「设置」。
2. 点击「隐私保护」按钮。
3. 点击「保护隐私」。
4. 点击「特殊权限设置」按钮。
5. 点击「安装未知应用」。
6. 选择要解除权限的应用，选 浏览器。
7. 打开「允许来自此来源的应用」开关即可。

下图左边为选择要解除权限的应用，选 浏览器，右边为设定画面，打开「允许来自此来源的应用」开关。

图 13、解除小米安装未知应用的权限

透过扫码工具下载打包好的 apk ，扫码工具预设会打开 浏览器 来进行下载与安装工作，下图显示整个安装过程中的提示，安装完毕后会出现先前设定好的图示以及应用名称。

图 14、透过浏览器来安装应用的画面

直接单击 CWA 观赏鱼辨识 图示后会出现下图左边画面，那是 HBuilderX 建立的 5＋app 项目的预设画面，而右手边则是长按图示后选看应用详情，就可以看到先前的设定，都会出现在这个画面中。

图 15、观赏鱼辨识应用的执行画面以及应用详情

参考资料

• DCloud产品综述， https://ask.dcloud.net.cn/docs/
• HBuilderX 简介，https://hx.dcloud.net.cn/README
• HBuilderX文档系统，https://hx.dcloud.net.cn/