HTML5plus教程

一、HTML5+ - 介绍、获取设备信息 (2)

二、HTML5+ - 拨打电话、保持屏幕唤醒、设备震动 (8)

三、HTML5+ 网络及网络状态获取 (11)

四、HTML5+ 事件相关（窗口事件及原生dom事件） (15)

五、HTML5+ - nativeUI系统原生界面管理 (21)

六、HTML5+ storage本地数据存储 (28)

七、HTML5+ IO模块（本地文件系统）基础篇 (30)

八、HTML5+ DirectoryEntry（文件夹及文件操作） (37)

九、HTML5+ - downloader 文件下载模块 (46)

十、HTML5+ - audio音频播放及网络音频文件播放 (51)

十一、HTML5+ 使用gallery管理系统相册 (55)

十二、HTML5+ 使用uploader模块进行文件上传 (60)

十三、HTML5+ webview应用窗口详解（基础篇） (67)

一、HTML5+ - 介绍、获取设备信息

1、HTML5+ 介绍

HTML5plus Runtime，简称5+ Runtime，是运行于手机端的强化web引擎，除了支持标准HTML5外，还支持更多扩展的js api，使得js的能力不输于原生。5+ Runtime内置于HBuilder，在真机运行、打包时自动挂载。

业内之前有phonegap/Cordova方案，但是他们自带js api太少了，扩展api

需要用原生语言开发，更致命的是这类方案的性能不足。

封装成跨平台的HTML5plus规范，并将规范公开于https://www.360docs.net/doc/3a11679407.html,，不做厂商私有API。包括二维码、摇一摇、语音输入、地图、支付、分享、文件系统、通讯录等常用API，可以方便简单的编写，并且可跨平台。

HTML5+ 和 MUI的关系

mui是基于HTML5+ 的一套app前端UI框架（不要再问mui能不能用在微信公众号开发中了，不能！），如果你觉得MUI过于臃肿并拥有一定的js及综合开发能力，那么可以直接使用HTML5+进行app开发。

开发工具 HBUIDER！

2、获取设备信息

imei: 设备的国际移动设备身份码

imsi: 设备的国际移动用户识别码

model: 设备的型号

vendor: 设备的生产厂商

uuid: 设备的唯一标识

OS 底层系统信息:

language: 系统语言信息

version: 系统版本信息

name: 系统的名称

vendor: 系统的供应商信息

Screen模块管理设备屏幕信息：

resolutionHeight: 设备屏幕高度分辨率

设备屏幕区域包括系统状态栏显示区域和应用显示区域，screen获取的是设备屏幕总区域的逻辑分辨率，单位为px。如果需要获取实际分辨率则需要乘以比例值scale。

resolutionWidth: 设备屏幕宽度分辨率

设备屏幕区域包括系统状态栏显示区域和应用显示区域，screen获取的是设备屏幕总区域的分辨率，单位为px。如果需要获取实际分辨率则需要乘以比例值scale。

scale: 逻辑分辨率与实际分辨率的比例

Display模块管理应用可使用的显示区域信息：应用可使用的屏幕高度逻辑分辨率

应用可使用的屏幕宽度逻辑分辨率

屏幕亮度

屏幕方向

锁定屏幕方向

解除锁定屏幕方向

二、HTML5+ - 拨打电话、保持屏幕唤醒、设备震动

1、拨打电话

参数：

number: ( String ) 必选要拨打的电话号码

confirm: ( Boolean ) 可选是否需要用户确认后开始拨打电话

设置为true表示打开系统拨打电话界面，需用户点击拨号按钮后才开始拨打电话，false则无需确认直接拨打电话，默认值为true。

返回值：

void : 无

平台支持：

Android - 2.2+ (支持)，iOS - 5.1+ (支持): 忽略confirm参数，调用直接拨打电话。

2、保持屏幕唤醒

参数：

lock: ( Boolean ) 必选是否设置程序一直保持唤醒状态

可取值true或false，true表示设定程序一直保持唤醒状态，false表示关闭程序一直保持唤醒状态。程序退出后将恢复默认状态，默认为关闭程序保持唤醒状态。

3、isWakelock 获取程序是否一直保持唤醒（屏幕常亮）状态

4、设备震动

参数：

milliseconds: ( Number ) 必选设备振动持续的时间数值类型，单位为ms，默认为500ms。

三、HTML5+ 网络及网络状态获取networkinfo模块用于获取网络信息

常量：

CONNECTION_UNKNOW: 网络状态常量，表示当前设备网络状态未知，固定值为0。CONNECTION_NONE: 网络状态常量，当前设备网络未连接网络，固定值为1。CONNECTION_ETHERNET: 网络状态常量，当前设备连接到有线网络，固定值为2。CONNECTION_WIFI: 网络状态常量，当前设备连接到无线WIFI网络，固定值为3。CONNECTION_CELL2G: 网络状态常量，当前设备连接到蜂窝移动2G网络，固定值为4。

CONNECTION_CELL3G: 网络状态常量，当前设备连接到蜂窝移动3G网络，固定值为5。

CONNECTION_CELL4G: 网络状态常量，当前设备连接到蜂窝移动4G网络，固定值为6。

使用getCurrentType函数获取设备当前连接的网络类型

演示代码

使用网络前建议先判断网络情况

检测网络状态变化

四、HTML5+ 事件相关（窗口事件及原生dom事件）

1、addEventListener 添加事件监听函数

参数：

event: ( DOMString ) 必选要添加监听的事件类型，可取下面列出的所有事件常量

callback: ( EventTrigCallback ) 必选扩展API加载完毕触发的回调函数capture: ( Boolean ) 可选事件流捕获顺序，可忽略

事件常量

"plusready": 扩展API加载完成事件

"pause": 运行环境从前台切换到后台事件

"resume": 运行环境从后台切换到前台事件

"netchange": 设备网络状态变化事件

"newintent": 新意图事件

"plusscrollbottom": 窗口滚动到底部事件

"error": 页面加载错误事件

2、"plusready": 扩展API加载完成事件

说明：

String 类型

为了保证扩展API的有效调用，所有应用页面都会用到的重要事件。应用页面显示时需要首先加载扩展和API代码库，当扩展API代码库加载完成时会触发p luseready事件，当设备触发该事件后，用户就可以安全的调用扩展API。如果程序中打开多个页面，每个都会收到此事件。

示例：

小提示：如果开发过程中使用了MUI，并且使用了mui.plusReady();函数可以不必再判断插件加载。

3、"pause": 运行环境从前台切换到后台事件

当程序从前台切换到后台时会触发此事件。若应用需要处理从前台切换到后台的事件行为，可通过注册事件监听器来监听“pause”事件，此事件需要在plus ready事件后通过document进行注册。

演示代码：

"resume": 运行环境从后台切换到前台事件

演示代码：

4、"plusscrollbottom": 窗口滚动到底部事件

当滚动Webview窗口到底部时触发此事件。演示代码：

5、原生dom事件

可以通过以下方式给dom元素绑定事件：

1、利用dom元素的 onclick="" 属性