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
４.解决方案
1、先在官网下载Hbuilder工具：也可以用360软件管家直接搜索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的图标：
配置图标后，点击：自动生成所有图标并替换，这样app的显示图标就都更换为我们上传的图片了；
9、 “启动图片配置”，“SDK配置”和“模块权限配置”默认即可，在“页面引用关系”界面，需要理解该功能是什么意思：
点击左侧html文件，右侧会显示不同的文件，图片等：表示左侧html加载时所需要的资源；
下面的表示该页面能跳转到的页面：
理解该功能的含义之后，分别点击左侧html文件，查看需要加载的资源和跳转的页面是否正常即可；
注：一般点击到“页面引用关系”的时候，就会自动生成所有的页面关系信息，但是有时候点开是空白的，这就需要自己手动点击该页面上方的“扫描代码”了。
也可能点击一次扫描代码还是空白，再多次点击依然空白（我觉得这是一个bug，我已经多次碰到该问题）。运气好的点击几次会正常加载，如果你点背，那就只能先手动添加资源，然后再点击“扫描代码”，一般会正常；
10、 “代码视图”页面，显示的是该app的具体信息，可以浏览一下，不需要更改。
11、 所有信息更改完成后，点击导航栏的“发行”-“发行为原生安装包”：
12、 点击“打包”后会提示“是否配置unpackage文件清单以减小包体积”；可以忽略该信息，但是为了减少下载所耗流量，我们还是配置一下比较合适；
13、 点开“配置unpackage文件清单”后，会发现，里面是一些sass组件，编译文件和无用的图片（如果你清理过图片，就不会显示无用的图片，但是sass文件肯定会有），将文件夹打钩，点击“加入unpackage清单”即可。
至于该操作是什么意思，自己查看HBuilder的解释；
14、 配置完成后，再次点击“打包”，发现还是有提示，这个提示就根据自己app的需要来选择了。通俗解释权限配置就是：你安装app时提示的“是否允许读取本手机联系人”，“是否允许读取短信”等操作。
15、 点击“继续打包”，一路确定后，弹出查看app打包状态：
16、 点击“打开下载目录”，找到app所在目录，剩下的就是将你的app给你的产品经理，让他放到各大应用商店供用户下载了。
17、 如果你只是需要将该app安装到手机进行调试，那就直接用数据线连接到电脑，点击Hbuilder的“运行”-“手机运行”，连接到手机，再根据手机对应下载手机助手即可。
５.编码实战
６.拓展思考
还有什么比较好的打包的软件
ios打包ipa：iOS开发环境，Mac OS、XCode；
Android打包apk：Android开发环境，使用eclipse和ADT；
７.参考文献
DCloud文档
5+APP开发入门指南
８.更多讨论
1. 打包应用时的开发者证书怎么获取？
iOS有两种证书和描述文件：
| 证书类型 | 使用场景 |
|---|---|
| 开发(Development)证书和描述文件 | 用于开发测试，在HBuilder中打包后可在真机环境通过Safari调试 |
| 发布(Distribution)证书和描述文件 | 用于提交Appstore，在HBuilder中打包后可使用Application Loader提交到Appstore审核发布 |
http://ask.dcloud.net.cn/article/152
2. IOS与Android的APP发布流程是怎么样的？
IOS:
1. 注册App ID，在Xcode中指定Bundle Identifier
2. 创建发布证书（Distribution Certificate）
3. 创建Distribution Provisioning Profile
4. 用Distribution Profile为应用签名
5. 打包App
6. 在iTunes Connect上传App
以上大部分的操作是在Provisioning Portal、XCode、Keychain Access工具和iTunes Connect中完成的。
Android
- 配置要发布的应用。
您至少需要从清单文件中移除 Log 调用和 android:debuggable 属性。您还应当为 android:versionCode 和 android:versionName 属性提供相应的值，这两个属性位于 元素中。为了满足 Google Play 的要求或适应发布应用使用的任何方法，您可能还必须配置多个其他设置。
如果您使用 Gradle 构建文件，则可以使用发布构建类型为应用的发布版本配置构建设置。 - 构建和签署发布版本的应用。
您可以将 Gradle 构建文件与发布构建类型搭配使用，构建和签署发布版本的应用。请参阅在 Android Studio 中构建和运行项目。 - 测试发布版本的应用。
在分发应用之前，您至少应在一个目标手机设备和一个目标平板电脑设备上对发布版本进行完全测试。 - 更新要发布的应用资源。
您需要确保多媒体文件和图形等所有应用资源都已更新并包含到您的应用中，或者暂存在适当的生产服务器上。 - 准备您的应用依赖的远程服务器和服务。
如果您的应用依赖外部服务器或服务，那么您需要确保它们是安全的并且已做好生产准备。
3. 为什么要在manifest.json中配置模块与权限
DCloud的5+客户端对安装包的构成划分了模块，并与5+的Api接口对应，即使用了什么接口，在制作安装包时里只需将该接口对应的模块编译到安装包里即可。无关模块在最终的安装包里并不存在，如应用并未用到地图功能，则最终的安装包里不需要地图模块相关的组件。这样可以减少安装包的体积。
鸣谢
感谢大家观看