html5+学习

1、HTML5+ 介绍

概述

HTML5 Plus移动APP,简称5+App,是一种基于HTML、JS、CSS编写的运行于手机端App,这种App可以通过扩展的JS API任意调用手机的原生能力,实现与原生App同样强大的功能和性能

HTML5 Plus 规范

HTML5+规范扩展了JavaScript对象plus,使得js可以调用各种浏览器无法实现或实现不佳的系统能力,设备能力如摄像头、陀螺仪、文件系统等,业务能力如上传下载,二维码、地图、支付、语音输入、消息推送等。
提供了原生的渲染能力,通过plus.webview、plus.nativeObj、plus.nativeUI,使用js来调用元素渲染能力,实现体验的大幅提升。
原生的api多达40万,HTML5+的封装并非吧40万api都封装了一遍,2个层面:

  1. HTML5Plus规范:常用的扩展能力,比如二维码、语音输入,都封装到了规范中,同时实现了Android和IOS的解析引擎,使得开发中的代码编写一次,课跨平台运行。
  2. Native.js是另一项创新技术。手机OS原生API有四十多万,大量的API无法被HTML5使用。Native.js把几十万原生API映射成了js对象,通过js可以直接调ios和andriod的api。不再跨平台,写法分别是plus.ios和plus.android;
5+ App概念解析
  1. 做一个mobile web项目
    运行在浏览器里,用不到HTML5Plus,使用标准的HTML5写法。可以使用mui框架,b/s方式,不可脱线运行
  2. 正统的app
    传统为c/s模式,安装和运行在手机上
    HBuilder新建项目时,选择“移动App”。在移动App项目下编写的HTML、js文件,是被打包到原生的安装包里的。
    此时本地的js和服务器通过ajax交互,然后客户端的js文件解析json。
    web项目始终是web项目,哪怕要在app项目里某个界面里,在线加载一个远程网页,也要把这个远程网页的代码,放到web项目下。
    移动App项目下,只能有html,js,css,json一级一些图片或数据文件,不能包括php、jsp、py等服务页面。
  3. 使用wap2app打包mobile web项目为app
    如果开发者想把一个做好的mobile web站,方便快速的打包成app,那么要使用DCloud的wap2app框架。

======================================================================

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滑块设置屏幕亮度的实例

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。 如果程序中打开多个页面,每个都会收到此事件。

示例:

小提示:如果开发过程中使用了MUI,并且使用了mui.plusReady();函数可以不必再判断插件加载(鸣谢MUI群主:上海-無語<18241375060>给予底层确认)。

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);}