Document

html5+学习

2024-10-01
dfer
152
html5 学习前端 CSDN

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个层面：

HTML5Plus规范：常用的扩展能力，比如二维码、语音输入，都封装到了规范中，同时实现了Android和IOS的解析引擎，使得开发中的代码编写一次，课跨平台运行。
Native.js是另一项创新技术。手机OS原生API有四十多万，大量的API无法被HTML5使用。Native.js把几十万原生API映射成了js对象，通过js可以直接调ios和andriod的api。不再跨平台，写法分别是plus.ios和plus.android;

5+ App概念解析

做一个mobile web项目
运行在浏览器里，用不到HTML5Plus，使用标准的HTML5写法。可以使用mui框架，b/s方式，不可脱线运行
正统的app
传统为c/s模式，安装和运行在手机上
HBuilder新建项目时，选择“移动App”。在移动App项目下编写的HTML、js文件，是被打包到原生的安装包里的。
此时本地的js和服务器通过ajax交互，然后客户端的js文件解析json。
web项目始终是web项目，哪怕要在app项目里某个界面里，在线加载一个远程网页，也要把这个远程网页的代码，放到web项目下。
移动App项目下，只能有html，js，css，json一级一些图片或数据文件，不能包括php、jsp、py等服务页面。
使用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);}

上一篇：【Web前端】HTM

下一篇： CY影视Cms系统P