1、HTML5+ 介绍
HTML5plus Runtime，简称5+ Runtime，是运行于手机端的强化web引擎，除了支持标准HTML5外，还支持更多扩展的js api，使得js的能力不输于原生。5+ Runtime内置于HBuilder，在真机运行、打包时自动挂载。
业内之前有phonegap/Cordova方案，但是他们自带js api太少了，扩展api需要用原生语言开发，更致命的是这类方案的性能不足。
封装成跨平台的HTML5plus规范，并将规范公开于www.HTML5plus.org，不做厂商私有API。包括二维码、摇一摇、语音输入、地图、支付、分享、文件系统、通讯录等常用API，可以方便简单的编写，并且可跨平台。
HTML5+ 和 MUI的关系
mui是基于HTML5+ 的一套app前端UI框架，如果你觉得MUI过于臃肿并拥有一定的js及综合开发能力，那么可以直接使用HTML5+进行app开发。
开发工具 HBUIDER！
错误修正
mui能够用于微信公众号及基于web浏览器的开发！但是代码较为臃肿并不推荐！
2、获取设备信息
imei: 设备的国际移动设备身份码
mui.alert(plus.device.imei);
imsi: 设备的国际移动用户识别码
mui.alert(plus.device.imsi);
model: 设备的型号
mui.alert(plus.device.model);
vendor: 设备的生产厂商
mui.alert(plus.device.vendor);
uuid: 设备的唯一标识
mui.alert(plus.device.uuid);
OS 底层系统信息:
language: 系统语言信息
mui.alert(plus.os.language);
version: 系统版本信息
mui.alert(plus.os.version);
name: 系统的名称
mui.alert(plus.os.version);
vendor: 系统的供应商信息
mui.alert(plus.os.vendor);
Screen模块管理设备屏幕信息：
resolutionHeight: 设备屏幕高度分辨率
设备屏幕区域包括系统状态栏显示区域和应用显示区域，screen获取的是设备屏幕总区域的逻辑分辨率，单位为px。 如果需要获取实际分辨率则需要乘以比例值scale。
mui.alert("Screen height: " + plus.screen.resolutionHeight * plus.screen.scale + “px” );
resolutionWidth: 设备屏幕宽度分辨率
设备屏幕区域包括系统状态栏显示区域和应用显示区域，screen获取的是设备屏幕总区域的分辨率，单位为px。 如果需要获取实际分辨率则需要乘以比例值scale。
alert( "Screen width: " + plus.screen.resolutionWidtht*plus.screen.scale + “px” );
scale: 逻辑分辨率与实际分辨率的比例
alert( plus.screen.scale);
Display模块管理应用可使用的显示区域信息：
应用可使用的屏幕高度逻辑分辨率
plus.display.resolutionHeight;
应用可使用的屏幕宽度逻辑分辨率
plus.display.resolutionWidth;
屏幕亮度
//获取亮度0 - 1之间的数值
plus.screen.getBrightness();
//设置
plus.screen.setBrightness( 0.5 );
//使用range滑块设置屏幕亮度的实例
屏幕方向
锁定屏幕方向
void plus.screen.lockOrientation( String orientation );
//参数
orientation: ( String ) 必选 要锁定的屏幕方向值
锁定屏幕方向可取以下值：
“portrait-primary”: 竖屏正方向；
“portrait-secondary”: 竖屏反方向，屏幕正方向按顺时针旋转180°；
“landscape-primary”: 横屏正方向，屏幕正方向按顺时针旋转90°；
“landscape-secondary”: 横屏方向，屏幕正方向按顺时针旋转270°；
“portrait”: 竖屏正方向或反方向，根据设备重力感应器自动调整；
“landscape”: 横屏正方向或反方向，根据设备重力感应器自动调整；
解除锁定屏幕方向
void plus.screen.unlockOrientation();
rm: ( Boolean ) 可选 是否需要用户确认后开始拨打电话
设置为true表示打开系统拨打电话界面，需用户点击拨号按钮后才开始拨打电话，false则无需确认直接拨打电话，默认值为true。
返回值：
void : 无
平台支持：
Android - 2.2+ (支持)，iOS - 5.1+ (支持): 忽略confirm参数，调用直接拨打电话。
function dial(){
plus.device.dial(‘114’, true);
}
2、保持屏幕唤醒
plus.device.setWakelock( lock );
参数：
lock: ( Boolean ) 必选 是否设置程序一直保持唤醒状态
可取值true或false，true表示设定程序一直保持唤醒状态，false表示关闭程序一直保持唤醒状态。程序退出后将恢复默认状态，默认为关闭程序保持唤醒状态。
3、isWakelock 获取程序是否一直保持唤醒（屏幕常亮）状态
if(plus.device.isWakelock()){
mui.toast(‘屏幕保存唤醒状态’);
}else{
mui.toast(‘no’);
}
4、设备震动
plus.device.vibrate( milliseconds );
参数：
milliseconds: ( Number ) 必选 设备振动持续的时间
数值类型，单位为ms，默认为500ms。
plus.device.vibrate( 500 );
Device模块用于获取网络信息
常量：
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函数获取设备当前连接的网络类型
plus.networkinfo.getCurrentType();
演示代码
使用网络前建议先判断网络情况
检测网络状态变化
1、addEventListener 添加事件监听函数
void document.addEventListener( event, callback, capture );
参数：
event: ( DOMString ) 必选 要添加监听的事件类型，可取下面面列出的所有事件常量
callback: ( EventTrigCallback ) 必选 扩展API加载完毕触发的回调函数
capture: ( Boolean ) 可选 事件流捕获顺序，可忽略
事件常量
“plusready”: 扩展API加载完成事件
“pause”: 运行环境从前台切换到后台事件
“resume”: 运行环境从后台切换到前台事件
“netchange”: 设备网络状态变化事件
“newintent”: 新意图事件
“plusscrollbottom”: 窗口滚动到底部事件
“error”: 页面加载错误事件
2、“plusready”: 扩展API加载完成事件
document.addEventListener( “plusready”, plusreadyCallback, capture )
说明：
String 类型
为了保证扩展API的有效调用，所有应用页面都会用到的重要事件。 应用页面显示时需要首先加载扩展和API代码库，当扩展API代码库加载完成时会触发pluseready事件，当设备触发该事件后，用户就可以安全的调用扩展API。 如果程序中打开多个页面，每个都会收到此事件。
示例：
3、“pause”: 运行环境从前台切换到后台事件
document.addEventListener( “pause”, pauseCallback, capture );
当程序从前台切换到后台时会触发此事件。 若应用需要处理从前台切换到后台的事件行为，可通过注册事件监听器来监听“pause”事件，此事件需要在plusready事件后通过document进行注册。
演示代码：
“resume”: 运行环境从后台切换到前台事件
document.addEventListener( “resume”, resumeCallback, capture );
演示代码：
mui.plusReady(function(){
document.addEventListener(‘pause’,function(){
mui.toast(‘app 在后端运行’);
},false);
document.addEventListener(‘resume’,function(){
mui.toast(‘app 在前端端运行’);
},false)
});
4、“plusscrollbottom”: 窗口滚动到底部事件
document.addEventListener( “plusscrollbottom”, eventCallback, capture );
当滚动Webview窗口到底部时触发此事件。演示代码：
mui.plusReady(function(){
document.addEventListener( “plusscrollbottom”, onScrollToBottom, false );
function onScrollToBottom() {
mui.toast(‘窗口滚动到底部’);
}
});
5、原生dom事件
可以通过以下方式给dom元素绑定事件：
1、利用dom元素的 οnclick="" 属性
//js代码
function test(){alert(1);}
2、获取dom对象，从写dom元素的 onclick 方法
//js代码
document.addEventListener(‘plusready’, function(){
var btn = document.getElementById(‘btn’);
btn.onclick = function(){alert(1);}
});
3、a 元素的href属性
test
//js代码
function test(){alert(1);}
扫一扫
1910
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
