HBuilder is a web development IDE that supports HTML5 launched by DCloud (Digital Paradise). The software can not only support web code writing, but also package the already written project code as a mobile APP. This article mainly explains how to use Hbuilder to package the project code as a mobile APP;
Proceed as follows:
1. First download the Hbuilder tool on the official website: You can also use the 360 software housekeeper to directly search for Hbuilder and download it;
Official website download address: DCloud - HBuilder, 5+, mui, streaming application, HTML5 expert
2. After the download is complete, you need to register first. You can open it without registering. However, when you package and generate a mobile APP, the appid will report an error. Registration is very simple. You can register and log in directly with your email address:
3. After registering and logging in, the introduction to Hbuilder explains how to quickly write code, you don't need to read it. First open "File" - "New" - "Mobile APP", enter "App Name", "Location" can be selected according to your needs, "Select Template" recommends selecting an empty template;
4. After the new creation is completed, open the path where the folder is located, and many empty files will be created by default:
5. Hbuilder will display the newly created project folder:
6. After opening the newly created local folder, the subfolders in this folder are not necessary. If you use sass or less compiled css files, you can delete the css folder directly, and then delete the sass or css files in your project. The less folder can be copied; other html, ls, img folders, copy your own project files to the folder correspondingly, note that the reference path in html needs to be kept correct;
7. After the file is copied, open HBuilder and open the manifest.json file: edit the application name and version number as needed, click the appid to get it from the cloud, and the page entry defaults to index.html. Change the startup page of the APP according to your own project needs;
8. After the configuration is complete, click the icon configuration at the bottom of the page: configure the display icon of the APP on the mobile phone; the default is the HBuilder icon:
After configuring the icons, click: Automatically generate all icons and replace them, so that the display icons of the app are all replaced with the pictures we uploaded;
9、 “启动图片配置”，“SDK配置”和“模块权限配置”默认即可，在“页面引用关系”界面，需要理解该功能是什么意思：
点击左侧html文件，右侧会显示不同的文件，图片等：表示左侧html加载时所需要的资源；
下面的表示该页面能跳转到的页面：
理解该功能的含义之后，分别点击左侧html文件，查看需要加载的资源和跳转的页面是否正常即可；
注：一般点击到“页面引用关系”的时候，就会自动生成所有的页面关系信息，但是有时候点开是空白的，这就需要自己手动点击该页面上方的“扫描代码”了。
也可能点击一次扫描代码还是空白，再多次点击依然空白（我觉得这是一个bug，我已经多次碰到该问题）。运气好的点击几次会正常加载，如果你点背，那就只能先手动添加资源，然后再点击“扫描代码”，一般会正常；
10、 “代码视图”页面，显示的是该app的具体信息，可以浏览一下，不需要更改。
11、 所有信息更改完成后，点击导航栏的“发行”-“发行为原生安装包”：
12、 点击“打包”后会提示“是否配置unpackage文件清单以减小包体积”；可以忽略该信息，但是为了减少下载所耗流量，我们还是配置一下比较合适；
13、 点开“配置unpackage文件清单”后，会发现，里面是一些sass组件，编译文件和无用的图片（如果你清理过图片，就不会显示无用的图片，但是sass文件肯定会有），将文件夹打钩，点击“加入unpackage清单”即可。
至于该操作是什么意思，自己查看HBuilder的解释；
14、 配置完成后，再次点击“打包”，发现还是有提示，这个提示就根据自己app的需要来选择了。通俗解释权限配置就是：你安装app时提示的“是否允许读取本手机联系人”，“是否允许读取短信”等操作。
15、 点击“继续打包”，一路确定后，弹出查看app打包状态：
打包成功后会显示一个安卓的app，一个苹果的app；
16、 点击“打开下载目录”，找到app所在目录，剩下的就是将你的app给你的产品经理，让他放到各大应用商店供用户下载了。
17、 如果你只是需要将该app安装到手机进行调试，那就直接用数据线连接到电脑，点击Hbuilder的“运行”-“手机运行”，连接到手机，再根据手机对应下载手机助手即可。