HBuilder打包App的过程

桃扇骨 2022-03-24 16:58 371阅读 0赞

HBuilder是DCloud（数字天堂）推出的一款支持HTML5的Web开发IDE。该软件既可以支持web代码编写，也可以将已经编写好的项目代码打包为手机APP。

HBuilder提供的打包有云端打包和本地打包两种，云端打包的特点是DCloud官方配置好了原生的打包环境，可以把HTML等文件编译为原生安装包。

1，下载HBuilder，注册并登陆。首先打开“文件”-“新建”-“移动APP”，输入“应用名称”，“位置”可以根据需要自己选择即可，“选择模板”建议选择空模板；

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNzQxOTcz_size_16_color_FFFFFF_t_70][]

2，新建完成后， 在项目管理器会显示新建的项目目录，其中css，img，js和index.html这几个文件可删可改可替换。

unpackage文件夹是放置app图标和启动界面的图片。

manifest.json文件是移动App的配置文件，用于指定应用的显示名称、图标、应用入口文件地址及需要使用的设备权限等信息，用户可通过HBuilder的可视化界面视图或者源码视图来配置移动App的信息。

![20190122154149956.png][]

3， 文件复制完成后，刷新更新下，双击打开manifest.json文件来配置App。

appid：点击云端获取。版本号：根据需要来编辑。页面入口：默认是index.html，根据自己项目需要，更改APP的启动页面。应用描述：自己随便填。应用是否全屏显示：勾上就全屏显示。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNzQxOTcz_size_16_color_FFFFFF_t_70 1][]

4.图标配置：点击页面下方的图标配置，配置APP显示图标。

1)点击"+"号的正方形方框，选择图标素材的路径找到图标素材，再点击" 自动生成所有图标并替换"按钮，完成图标生成和替换。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNzQxOTcz_size_16_color_FFFFFF_t_70 2][]

2),生成的图标自动在unpackage文件夹下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNzQxOTcz_size_16_color_FFFFFF_t_70 3][]

5，启动图片（splash）配置，点击切换到启动图片配置

1)，启动选项：默认

2)，启动图片设置，根据自己需要是Android还是iOS平台，再根据不同设备对应做出启动图片

3），在unpackage→res文件下新建个文件命名"splash"，把做好的启动图片放到这个文件里面。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNzQxOTcz_size_16_color_FFFFFF_t_70 4][]

4），在启动图片设置里点击"选择"，找到刚放进来的启动图片

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNzQxOTcz_size_16_color_FFFFFF_t_70 5][]

6，SDK配置：有需要就配置，没有就默认就行。

7，模块权限配置：有需要就配置，没有就默认就行。

8，页面引用关系：

首先点击“扫描代码”，再点击左边index.html文件

该功能是什么意思：点击左侧html文件，右侧会显示不同的文件，图片等。可以表示左侧html文件加载时所需要的资源。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNzQxOTcz_size_16_color_FFFFFF_t_70 6][]

9，代码视图：在代码视图里查看设置是否正确，确定后ctrl+s保存好。

10，设置好配置选项，正式进入打包阶段

HBuilder里点："发行"-"发行为原生安装包"开始打包

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNzQxOTcz_size_16_color_FFFFFF_t_70 7][]

这里介绍一下android打包

1）一路默认设置就可以打包成功。

11，提交成功后点击确定，就可以查看App打包状态

![20190122160840235.png][]

等打包成功，就可以点手动下载，安装到手机。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNzQxOTcz_size_16_color_FFFFFF_t_70 8][]

12，调试和安装模拟器

如果你需要在电脑本机进行调试那就需要安装模拟器，请参考http://ask.dcloud.net.cn/article/151如何安装配置手机模拟器，或者在HBuilder里→→运行→→手机运行→→如何安装配置手机模拟器进入查看。

如果需要安装到手机进行真机调试，把手机用数据线连接到电脑，然后重新启动HBuilder→→运行→→手机运行→→连接上真机。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNzQxOTcz_size_16_color_FFFFFF_t_70]: /images/20220323/f1017ef8afd94aa9a967ce2eac8707ff.png
[20190122154149956.png]: /images/20220323/5f3b2a10ecc34d5f8a84adf0a82fa359.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNzQxOTcz_size_16_color_FFFFFF_t_70 1]: /images/20220323/1ee6791fcac24587958b71d418d13435.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNzQxOTcz_size_16_color_FFFFFF_t_70 2]: /images/20220323/f8d748aa33fb42b1a979c507ba39dd7f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNzQxOTcz_size_16_color_FFFFFF_t_70 3]: /images/20220323/d5b25838fc4441f18852580b55b69a2a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNzQxOTcz_size_16_color_FFFFFF_t_70 4]: /images/20220323/301d8458c76549a2bbfcacfef1e694da.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNzQxOTcz_size_16_color_FFFFFF_t_70 5]: /images/20220323/794e2f50219d41be99bc512cc8bc15a3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNzQxOTcz_size_16_color_FFFFFF_t_70 6]: /images/20220323/c5ba46c98c774d62aae1ca28c89acac6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNzQxOTcz_size_16_color_FFFFFF_t_70 7]: /images/20220323/6a74d7eeb1074cc0a72ce86f0387f86a.png
[20190122160840235.png]: /images/20220323/800012de2eff4b7b8b3f8f48645d5588.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNzQxOTcz_size_16_color_FFFFFF_t_70 8]: /images/20220323/11137cf038e64755a3f3666d2554fdea.png