如何使用HBUILDER打包APP？

小课堂【深圳-WEB-C组】

分享人：李榕涛

目录

1.背景介绍

2.知识剖析

3.常见问题

4.解决方案

5.编码实战

6.扩展思考

7.参考文献

8.更多讨论

1.背景介绍

HBuilder是DCloud（数字天堂）推出的一款支持HTML5的Web开发IDE。HBuilder的编写用到了Java、C、Web和Ruby。HBuilder本身主体是由Java编写，它基于Eclipse，所以顺其自然地兼容了Eclipse的插件。 快，是HBuilder的最大优势，通过完整的语法提示和代码输入法、代码块等，大幅提升HTML、js、css的开发效率。 当知道如何创建HTML5 APP项目，以及APP页面如何调试后。接下来，需要考虑的就是HTML5 APP项目打包的事情。

2.知识剖析

Manifest.json文档

Manifest.json文件是5+移动App的配置文件，用于指定应用的显示名称、图标、应用入口文件地址及需要使用的设备权限等信息， 用户可通过HBuilder的可视化界面视图或者源码视图来配置5+移动App的信息。 Manifest.json文件根据w3c的webapp规范制定， plus节点下内容为HTML5Plus扩展规范，其下包括iOS和Android子节点，内容来源分别为iOS和Android原生打包所要求的参数， 用于对5+移动App打包为ipa或apk安装包进行配置。

3.常见问题

如何打包成app

4.解决方案

1.现在官网下载HBuilder
网址：http://www.dcloud.io/
2.下载完成之后，需要先进行注册，不注册也可以打开，但是打包生成手机APP的时候，appid会报错，注册非常简单，直接用邮箱注册并登录即可
3、 注册并登录后，Hbuilder入门是讲解怎么快速编写代码的，可以不用看。首先打开“文件”-“新建”-“移动APP”，输入“应用名称”，“位置”可以根据需要自己选择即可，“选择模板”建议选择空模板；
4、 新建完成之后，打开文件夹所在的路径，默认会新建很多空文件：
5、 Hbuilder会显示新建的项目文件夹：
6、 打开新建的本地文件夹后，该文件夹中的子文件夹不是必须的，如果你用的sass或者less编译的css文件， 可以直接将css文件夹删除，再将自己项目中的sass或者less文件夹复制过来即可； 其他的html，ls，img文件夹，将自己的项目文件对应复制到文件夹中，注意html中的引用路径需要保持正确；
7、 文件复制完成后，打开HBuilder，打开manifest.json文件：应用名称和版本号根据需要编辑， appid点击云端获取，页面入口默认是index.html，根据自己项目需要，更改APP的启动页面；
8、 配置完成后，点击页面下方的图标配置：配置APP在手机上的显示图标；默认是HBuilder的图标：
9、 “启动图片配置”，“SDK配置”和“模块权限配置”默认即可，在“页面引用关系”界面，需要理解该功能是什么意思：
10、“代码视图”页面，显示的是该app的具体信息，可以浏览一下，不需要更改。
11、所有信息更改完成后，点击导航栏的“发行”-“发行为原生安装包”：
12、点击“打包”后会提示“是否配置unpackage文件清单以减小包体积”；可以忽略该信息，但是为了减少下载所耗流量，我们还是配置一下比较合适；
13、点开“配置unpackage文件清单”后，会发现，里面是一些sass组件，编译文件和无用的图片（如果你清理过图片， 就不会显示无用的图片，但是sass文件肯定会有），将文件夹打钩，点击“加入unpackage清单”即可。
14、配置完成后，再次点击“打包”，发现还是有提示，这个提示就根据自己app的需要来选择了。 通俗解释权限配置就是：你安装app时提示的“是否允许读取本手机联系人”，“是否允许读取短信”等操作。
15、 点击“继续打包”，一路确定后，弹出查看app打包状态：
打包成功后会显示一个安卓的app，一个苹果的app；

5.编码实战

6.扩展思考

ios打包ipa：iOS开发环境，Mac OS、XCode

Android打包apk：Android开发环境，使用eclipse和ADT

7.参考文献

DCloud文档

5+APP开发入门指南

8.更多讨论

鸣谢

感谢大家观看

By 李榕涛