使用HBuilder打包5+App

http://www.dcloud.io/

HTML5 Plus移动App，简称5+App，是一种基于HTML、JS、CSS编写的运行于手机端的App，这种App可以通过扩展的JS API任意调用手机的原生能力，实现与原生App同样强大的功能和性能。
使用HTML5+开发的移动App并非mobile web页面。这是新手最容易混淆的地方。mobile web的文件存放在web服务器上，而移动App的文件存放在手机本地，编写移动App的html、js、css文件被打包到ipa或apk等原生安装包，在手机客户端运行。
用个更形象的列子，web app仍然是b/s结构，而移动App是c/s结构甚至是完全脱线的单机应用。

以某个小项目举例：
引入目录文件

1.png

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

右键生成

HBuilder打开manifest.json文件后默认显示“可视化视图”，可配置应用的基本信息：

3.png

• 应用名称：App打包后在手机上桌面的快捷方式名称；
• appid：HBuilder appid（应用标识），在创建时分配的、以后不可改的标识。如用户手动修改ID打包时会提示参数错误；
• 版本号：应用的版本号，用户可通过plus API（plus.runtime.version）获取应用的版本号，需提交App云端打包后才能生效；
• 入口页面：应用启动后自动打开的第一个HTML页面，可填写本地html文件地址（相对于应用根目录）或网络地址（以http://或https://开头）。

关于Manifest.json文档说明详细的戳官方：http://ask.dcloud.net.cn/article/94

注意：所有图片格式必须是png，且严格符合分辨率要求。使用其他图片格式重命名为png会导致打包失败！

配置完成后可以连接手机运行试看：
点击运行——手机查看——在xxx手机查看。
如果手机已经通过usb连接上，但是在查看那里找不到设备，先看一下线连好没有~
可以尝试重启设备，或者安装一个手机助手。
更多解决方案：http://ask.dcloud.net.cn/article/97

查看运行没问题，就可以打包了。
注意：
1.文件路径。如果涉及到绝对路径相对路径，请确认在项目改名的情况下正确。
2.文件不可包含中文名。

打包

HBuilder提供的打包有云打包和本地打包两种。此处仅对云打包进行说明。
HBuilder并不会向开发者收取任何有关打包的费用，也不限制开发者使用本地打包。
云打包的特点是DCloud官方配置好了原生的打包环境，可以把HTML等文件编译为原生安装包。

以安卓的举例：可以选择使用DCloud生成的公用证书或自己生成的证书，两者不影响安装包的发布，唯一的差别就是证书中开发者和企业信息不同。

6.png

这里使用公有证书。
想要使用自有证书可以戳教程： http://ask.dcloud.net.cn/article/89

点击打包按钮，会弹出提示：

7.png

确认需要的权限都添加完毕后执行打包。
接下来就可以等了。
如果“制作状态”栏显示“打包成功，下载完成”则表示云端打包完成，可点击“打开下载目录”查看下载的安装包。
已经打好的安装包，允许开发者在2天内继续下载。2天后服务器端会清除文件。