目录
前言：这部分功能要在手机上才可见到效果，使用时注意手机连接。
1、H5+ 设备硬件信息操作
1）、device : 模块管理设备信息，用于获取手机设备的相关信息，如IMEI、IMSI、型号、厂商等。IMEI：设备的国际移动设备身份码；model:设备的型号 ；拨打电话：dial(number,confirm) ；设备振动：vibrate(milliseconds ) ；保持唤醒（屏幕常亮）状态：setWakelock( lock )
2）、os：管理操作系统信息 ；version: 系统版本信息 ；name: 系统的名称 。
3）、screen：管理设备屏幕信息 ；设备屏幕分辨率：resolutionHeight | resolutionWidth ；锁定屏幕方向：lockOrientation 。
示例如下：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/mui.min.css" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" rel="stylesheet" />
</head>
<body>
<script src="js/mui.min.js"></script>
<script type="text/javascript">
mui.init();
</script>
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">硬件基本信息</h1>
</header>
<div class="mui-content">
<button type="button" class="mui-btn mui-btn-blue" id="btn1">获取设备信息</button>
<button type="button" class="mui-btn mui-btn-blue" id="btn2">振动</button>
<h4 id="dis"></h4>
</div>
<script type="text/javascript">
mui.plusReady(function(){
document.getElementById("btn1").addEventListener("tap",function(){
var str=plus.device.imei+"|"+
plus.device.model+"|"+
plus.os.name+"|"+
plus.os.version+"|"+
plus.screen.resolutionWidth+"|"+
plus.screen.resolutionHeight;
document.getElementById("dis").innerHTML=str;
});
document.getElementById("btn2").addEventListener("tap",function(){
plus.device.vibrate(1000);
});
});
</script>
</body>
</html>
2、Accelerometer 加速度仪
使用： plus.accelerometer获取设备加速度信息，包括x（屏幕水平方向）、y（垂直屏幕水平方向）、z（垂直屏幕平面方向）三个方向的加速度信息 ；getCurrentAcceleration: 获取当前设备的加速度信息 ，如 getCurrentAcceleration(successCB,errorCB) ；watchAcceleration: 监听设备加速度变化信息 ：watchAcceleration(successCB,errorCB,option) ，option: {frequency:1000} ；clearWatch: 关闭监听设备加速度信息
示例：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/mui.min.css" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" rel="stylesheet" />
</head>
<body>
<script src="js/mui.min.js"></script>
<script type="text/javascript">
mui.init()
</script>
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">加速度仪操作</h1>
</header>
<div class="mui-content">
<button type="button" class="mui-btn mui-btn-blue" id="btn1">获取加速度信息</button>
<button type="button" class="mui-btn mui-btn-blue" id="btn2">自动监听加速度信息</button>
<button type="button" class="mui-btn mui-btn-blue" id="btn3">停止监听</button>
<h4 id="dis"></h4>
</div>
<script type="text/javascript">
mui.plusReady(function(){
document.getElementById("btn1").addEventListener("tap",function(){
plus.accelerometer.getCurrentAcceleration(function(evt){
var str=evt.xAxis+"|"+evt.yAxis+"|"+evt.zAxis;
document.getElementById("dis").innerHTML=str;
},
function(e){
alert("获取加速度信息失败！");
});
});
var aID;
document.getElementById("btn2").addEventListener("tap",function(){
//开始监听加速度
aID=plus.accelerometer.watchAcceleration(function(evt){
var str=evt.xAxis+"|"+evt.yAxis+"|"+evt.zAxis;
document.getElementById("dis").innerHTML=str;
},
function(e){
alert("获取加速度信息失败！");
});
});
document.getElementById("btn3").addEventListener("tap",function(){
plus.accelerometer.clearWatch(aID); //停止监听
});
});
</script>
</body>
</html>
3、条码扫描
barcode条码扫描：plus.barcode获取条码码管理对象，提供常见的条码（二维码及一维码）的扫描识别功能。
1）、扫描识别条码：
new plus.barcode.Barcode(‘容器ID’) ；onmarked:条码识别成功事件，回调函数参数：type,result,file ；start 、cancel、 setFlash等
示例：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/mui.min.css" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" rel="stylesheet" />
</head>
<body>
<script src="js/mui.min.js"></script>
<script type="text/javascript">
mui.init()
</script>
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">条码识别</h1>
</header>
<div class="mui-content">
<button type="button" class="mui-btn mui-btn-blue" id="btn">扫描</button>
<h4 id="dis"></h4>
</div>
<script type="text/javascript">
document.getElementById("btn").addEventListener("tap",function(){
mui.openWindow({
url:"H5Demo3_sub.html",
id:"H5Demo3_sub"
});
});
window.addEventListener("barcode",function(evt){
document.getElementById("dis").innerHTML=evt.detail.dt;
});
</script>
</body>
</html>
2）、从图片中识别：
plus.barcode.scan(path,successCB,errorCB,filters ) 。
示例：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/mui.min.css" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" rel="stylesheet" />
<style type="text/css">
#bcd{
height: 400px;
background: rgb(30,30,30);
}
body{
background: black;
}
</style>
</head>
<body>
<script src="js/mui.min.js"></script>
<script type="text/javascript">
mui.init();
mui.plusReady(function(){
var barcode;
var currW=plus.webview.currentWebview();
var pW=currW.opener();
currW.addEventListener("show",function(){
barcode=new plus.barcode.Barcode("bcd"); //初始化扫描器对象
barcode.onmarked=function(type,result){ //条码识别成功事件
// alert(result);
mui.fire(pW,"barcode",{dt:result});
mui.back();
};
barcode.start();
});
});
</script>
<header class="mui-bar mui-bar-nav" style="background: black;">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title" style="color: white;">扫描器</h1>
</header>
<div class="mui-content">
<div id="bcd"></div>
</div>
<div class="mui-bar mui-bar-footer" >
<span class="mui-icon mui-icon-flag mui-pull-right"></span>
</div>
</body>
</html>
4、Camera 摄像头 | 系统相册操作 Gallery
1）、Camera摄像头操作：用于拍照、摄像操作。plus.camera获取摄像头管理对象 ；getCamera(index) : 获取摄像头管理对象，包括 1:主摄像头，2：辅助摄像头 ；captureImage(successCB,errorCB, CameraOption) ；successCB=function(path){} ，path指照片保存位置 。
2）、图片显示问题 ：img 的 src 必须经过路径转换 plus.io.resolveLocalFileSystemURL
3）、保存到系统相册 ：plus.gallery.save(path,function(){})
4）、从系统相册中选择图片 ：plus.gallery.pick(function(path){})
示例：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/mui.min.css" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" rel="stylesheet" />
</head>
<body>
<script src="js/mui.min.js"></script>
<script type="text/javascript">
mui.init()
</script>
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">相机</h1>
</header>
<div class="mui-content">
<button type="button" class="mui-btn mui-btn-blue" id="btn">拍照</button>
<button type="button" class="mui-btn mui-btn-blue" id="btn2">保存照片</button>
<button type="button" class="mui-btn mui-btn-blue" id="btn3">读取系统相册中的照片</button>
<img id="dis" width="100%"></img>
</div>
<script type="text/javascript">
mui.plusReady(function(){
document.getElementById("btn").addEventListener("tap",function(){
var camera=plus.camera.getCamera();
camera.captureImage(function(evt){
alert(evt);
var path=plus.io.convertLocalFileSystemURL(evt); //转换路径
document.getElementById("dis").src=path;
},
function(){
alert("拍照失败！");
});
});
document.getElementById("btn2").addEventListener("tap",function(){
plus.gallery.save(document.getElementById("dis").src,
function(){
alert("OK");
},function(){
alert("err");
}
);
});
document.getElementById("btn3").addEventListener("tap",function(){
plus.gallery.pick(function(path){
document.getElementById("dis").src=path;
},function(){
alert("读取图片失败！");
});
});
});
</script>
</body>
</html>