Day 25 - HBuilder X 产生 apk
使用 HBuilder X 来开发手机端应用，原则上需要包含这几个步骤
- 下载开发工具并安装
- 注册 dcloud 开发帐号
- 新增项目
- 设定 Andriod 组态
- 透过云端进行编译成apk
- 修改手机设定并安装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、将链结转换成二维码
（二维码有用马赛克后制处理过，所以是没办法扫的，但原网站的是可以的）
手机下载安装
接下来的操作就是在手机端，笔者所使用的是小米手机，而小米安装未知应用权限解除的方法如下：
- 打开手机的「设置」。
- 点击「隐私保护」按钮。
- 点击「保护隐私」。
- 点击「特殊权限设置」按钮。
- 点击「安装未知应用」。
- 选择要解除权限的应用，选 浏览器。
- 打开「允许来自此来源的应用」开关即可。
下图左边为选择要解除权限的应用，选 浏览器，右边为设定画面，打开「允许来自此来源的应用」开关。
图 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/
1553
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
