什么是 HTML5Plus 移动应用
HTML5 Plus移动App，简称5+App，是一种基于HTML、JS、CSS编写的运行于手机端的App，这种App可以通过扩展的JS API任意调用手机的原生能力，实现与原生App同样强大的功能和性能。
简单一句就是，用开发 Web 的技术完成原生移动应用的开发。
概念澄清
HTML5+
HTML5+规范是一个开放规范，隶属于工信部，允许三方浏览器厂商或其他手机runtime制造商实现。
HTML5+ 和 HTML5，名字只有一词之差，但是目前而言是完全两个不同的东西。
5+App 与 移动 Web
虽然 5+App 与移动 Web 开发，采用的相关技术大体一致，但是两者的区别还是很明显的。
- 5+App 是 C/S 的，Web 是 B/S 的。
- 5+App 是独立的客户端，应用资源通常只能是静态的文件。PHP、JSP 这些服务器模板，没有解析器去处理。
- 5+App 打包后是 apk 及 ipa 后缀的包，也就是原生的移动应用。
-
window.plus扩展的 API，依赖 5+Runtime 引擎。普通浏览器没有集成这个引擎，Web 开发通常用不了这些 API。
小结
以上说了这么多，目的就是帮助大家搞清楚 HTML5+ 是干什么的。作为开发者，首先搞清楚自己要开发移动应用还是 Web。别一看名字，就想当然地去用这个技术去开发 Web。
准备工作
开发工具
HBuilder 内置了 5+App 的开发环境，因此需要先下载此 IDE。
注册账号
下载并解压 HBuilder 后，启动 IDE。首次使用需要注册一个账号，方便之后管理应用以及在社区活动。
设备
由于在下没有 iOS 设备以及 Mac OS 的机器，因此这个系列的分享都是以 Windows 系统下开发 Android 应用为例。
一台电脑，一部手机。手机最好是 Android 4.4 及以上的，不推荐用模拟器。USB 线也是必须的，当然 HBuilder 同样支持 WiFi 调试。
第一个 5+App
新建应用
- 启动 HBuilder，并且登录。
- 菜单 -> 文件 -> 新建 -> 移动 App
-
模板暂时不需要调整，输入应用名“HelloWorld”，点击完成即可。
index.html
应用的入口页面，概念和 Web 的入口页类似。默认是应用根目录下的 index.html，这个可以调整。
manifest.json
5+App 的配置文件，用于配置应用的信息。HBuilder 对此文件做了特殊处理，并提供了可视化的编辑界面。
- 应用信息
- 应用名称：就是你的应用在手机桌面上显示的名字。
- appid：这个是 5+App 创建时分配的，不要修改。更不要和 iOS 的 AppID 或者其它第三方平台上的 appid 混淆。
- 版本号：应用版本号
- 页面入口：就是首页是哪个页面，可修改。
- 应用描述：简单说明一下应用的信息
- 图标配置
- 就是应用的 logo，按照提示做一张符合规格的图，然后一键生成替换。
- 启动图片
- splash 图就是应用启动的时候那张占位的图片，QQ 是个企鹅，微信是那个月球。
- 启动选项：通常用默认的就行，根据需要调整。
- 图片设置：按照需要，制作相应尺寸的 png 图，选择配置即可。
- SDK 配置
- 如果用到了一些第三方的 SDK 的功能，就需要配置相应的信息。
- SDK 启用需填写的信息，去相应的第三方开放平台注册即可。
- 模块权限配置
- 某些模块的启用需要配置下权限
- 页面引用关系
- 不是特别懂，看说明书吧。
- 代码视图
配置的源代码部分，不是所有配置都提供了可视化编辑视图。
真机运行
将手机连上电脑，HBuilder 会自动检测到连接到电脑上的设备。菜单 -> 运行 -> 真机运行，选择你的设备即可。首次使用会安装一个调试基座 HBuilder，如果 HBuilder IDE 版本变化的话，真机运行会覆盖旧版本的 HBuilder 基座。
调试
- 页面的样式，推荐使用电脑的 Chrome 浏览器手机模式进行调试。
- Android 真机运行时，每次修改完文件并保存，手机端的基座会同步代码。
- Android 还是可以使用 Chrome RemoteDebugging 进行调试，但是需要是 Android 4.4 以上的设备并且首次需要FQ。
调用 5+API
简单封装一下扩展 API 加载完成的事件回调
var plusReady = function(callback) {
if(window.plus) {
callback();
} else {
document.addEventListener('plusready', callback);
}
};然后，读取下当前设备连接的网络类型并输出到页面上。
plusReady(function() {
var netType = plus.networkinfo.getCurrentType();
document.write('当前网络类型为：' + netType);
});真机运行，可以看到页面上的内容“当前网络类型为：3”，也就是 WiFi 网络环境。
打包
- 确认 manifest.json 中的信息无误
- logo 及 splash 图不配置的话，会用默认的 HBuilder 相关图片。
- 菜单 -> 发行 -> 云打包-打原生安装包
- 勾选 Android，Android 的证书相对随意一些，用 DCloud 提供的现成的或者自己生成的都一样。
- 包名要严格遵循 Android 包名的格式规范，不要乱写。这里调整一下，改为
com.helo.html5plus。 - 如果配置信息有错误，会有提示，必须修改正确才能继续。
- 一切无误之后，点击“打包”，等待即可。
- 打包完成后，会自动下载到相应的目录下。
安装
将云打包下载下来的 apk 安装到手机上，启动应用就可以查看当前网络状态信息。那么，我们的第一个 5+App 就顺利制作完成了。