HTML5plus教程
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="" 属性