我这边也有这样一个问题，调用方式如下
<!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" rel="stylesheet" />
<style type="text/css">
#bcid {
width: 100%;
height: 100%;
position: absolute;
/*top: 0px;*/
background: #000000;
text-align: center;
}
html,
body,
.mui-content {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.fbt {
color: #0E76E1;
width: 50%;
background-color: #ffffff;
float: left;
line-height: 44px;
text-align: center;
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">扫一扫</h1>
<span class="mui-icon mui-icon-spinner-cycle mui-spin mui-pull-right" id="turnTheLight"></span>
</header>
<div class="mui-content">
<div id="bcid">
<!--盛放扫描控件的div-->
</div>
<!--<div class="mui-bar mui-bar-footer" style="padding: 0px;">
<div class="fbt" onclick="scanPicture();">从相册选择二维码</div>
<div class="fbt mui-action-back">取 消</div>
</div>-->
</div>
<script src="js/mui.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script>
(function($, doc) {
$.init();
var schoolId;
var old_back = mui.back;
var height = window.innerHeight + 'px'; //获取页面实际高度
var width = window.innerWidth + 'px';
var bcid = document.getElementById("bcid");
bcid.style.height = height;
bcid.style.width = width;
var scan = null; //扫描对象
window.addEventListener("show", function() {
setTimeout(function() {
if(scan) {
scan.start();
} else {
startRecognize();
}
}, 500);
});
$.plusReady(function() {
});
// mui.back = function() {
// if(scan) {
// scan.cancel();
// scan.close();
// }
// old_back();
// };
function startRecognize() { //开启扫描
try {
var filter;
//自定义的扫描控件样式
var styles = {
frameColor: "#29E52C",
scanbarColor: "#29E52C",
background: ""
}
//扫描控件构造
scan = new plus.barcode.Barcode('bcid', filter, styles);
scan.onmarked = onmarked;
scan.onerror = onerror; //扫描错误
scan.start();
//打开关闭闪光灯处理
var flag = false;
document.getElementById("turnTheLight").addEventListener('tap', function() {
if(flag == false) {
scan.setFlash(true);
flag = true;
} else {
scan.setFlash(false);
flag = false;
}
});
} catch(e) {
alert("出现错误啦:\n" + e);
}
};
function onerror(e) { //错误弹框
alert(e);
};
function onmarked(type, result) { //这个是扫描二维码的回调函数，type是扫描二维码回调的类型
var text = '';
switch(type) { //QR,EAN13,EAN8都是二维码的一种编码格式,result是返回的结果
case plus.barcode.QR:
text = 'QR: ';
break;
case plus.barcode.EAN13:
text = 'EAN13: ';
break;
case plus.barcode.EAN8:
text = 'EAN8: ';
break;
}
// alert(text + " : " + result);
// GetQueryString(result,"id");
var urlPar = result.substr(result.indexOf("?") + 1);
var codeId = GetQueryString(urlPar, "id");
schoolId = GetQueryString(urlPar, "schoolnumber");
getQRCodeState(codeId);
};
/**
* 查询扫描的二维码状态
* @param {Object} codeId
*/
function getQRCodeState(codeId) {
$.ajax({
type: "post",
url: "http://139.199.69.199:8046/services/AppService.asmx/getQRCodeState",
async: true,
dataType: 'json', //服务器返回json格式数据
headers: {
'Content-Type': 'application/json'
},
data: JSON.stringify({
id: codeId
}),
success: function(data) {
var obj = JSON.parse(data.d);
var item;
if(obj.data != null) { //在服务器中存在此二维码
if("0" == obj.data.STATE) { //等于0是未激活
if(mui.os.ios) {
item = ['取消', '激活'];
} else {
item = ['取消', '', '激活'];
}
mui.confirm('该二维码尚未激活，去激活！', '提示', item, function(e) {
switch(item[e.index]) {
case '取消':
old_back();
break;
case '激活':
$.openWindow({
url: 'addInfo.html',
id: 'addInfo',
styles: {
titleNView: {
autoBackButton: true,
titleText: '激活二维码'
}
},
extras: {
'codeId': codeId,
'schoolId': schoolId
}
});
//activateQRCode(app.getUser().ACCOUNT, codeId);
break;
}
}, '')
} else {
if(mui.os.ios) {
item = ['取消', '确认'];
} else {
item = ['取消', '', '确认'];
}
mui.confirm('抱歉，该二维码已经被激活过！', '提示', item, function(e) {
switch(item[e.index]) {
case '取消':
old_back();
break;
case '确认':
scan.start();
break;
}
}, '');
}
} else { //未知
if(mui.os.ios) {
item = ['取消', '确认'];
} else {
item = ['取消', '', '确认'];
}
mui.confirm('服务器未找到此二维码', '提示', item, function(e) {
switch(item[e.index]) {
case '取消':
old_back();
break;
case '确认':
scan.start();
break;
}
}, '')
}
},
error: function(xhr, type, errorThrown) {
alert("错误：" + type);
scan.start();
}
});
};
/**
* 激活二维码
* @param {Object} userId
* @param {Object} codeId
*/
function activateQRCode(userId, codeId) {
mui.ajax('http://139.199.69.199:8046/services/AppService.asmx/ActivateQRCode', {
data: JSON.stringify({
ID: codeId,
ACCOUNT: userId
}),
dataType: 'json', //服务器返回json格式数据
type: 'post', //HTTP请求类型
timeout: 10000, //超时时间设置为10秒；
headers: {
'Content-Type': 'application/json'
},
success: function(data) {
var item;
if(JSON.parse(data.d).flag) {
mui.confirm('您的二维码已激活成功！', '提示', ['确认'], function(e) {
old_back();
}, '')
} else {
if(mui.os.ios) {
item = ['取消', '重试'];
} else {
item = ['取消', '', '重试'];
}
mui.confirm('激活失败，请重试！', '提示', item, function(e) {
switch(item[e.index]) {
case '取消':
old_back();
break;
case '重试':
scan.start();
break;
}
}, '')
}
},
error: function(xhr, type, errorThrown) {
alert(type);
}
});
};
// 从相册中选择二维码图片
function scanPicture() { //可以直接识别二维码图片
plus.gallery.pick(function(path) {
plus.barcode.scan(path, onmarked, function(error) {
plus.nativeUI.alert("无法识别此图片");
});
}, function(err) {
plus.nativeUI.alert("Failed: " + err.message);
});
};
function GetQueryString(url, name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //寻找&+url参数名=参数值+&.&可以不存在
var r = url.match(reg);
if(r != null) return unescape(r[2]);
return null;
};
}(mui, document));
</script>
</body>
</html>
二维码扫描框看不见。在有的android手机上是好的，在酷派Y71-511上不行，在Iphone 6s上面也是可以的。
3 个回复
3***@qq.com - 80后.NET全栈开发工程师
我这边也有这样一个问题，调用方式如下
<!doctype html>
<html>
</html>
二维码扫描框看不见。在有的android手机上是好的，在酷派Y71-511上不行，在Iphone 6s上面也是可以的。
xiaotutu6000
你的代码没有研究透彻吧。我这边可以哦。在官方的例子上改造哦
3***@qq.com
麻烦指正一下，在酷派上面确实不行，二维码扫描框看不见。
2018-05-16 11:35
xiaotutu6000
你其他机型都正常么？我这边没有酷派机器
2018-05-16 11:36
3***@qq.com
回复 xiaotutu6000:用华为的是正常的，酷派Y71-511就不行
2018-05-16 11:37
xiaotutu6000
哦，那就没有办法了，我身边没有酷派机器。可以给你一个思路，同套代码，在不同机型不行的，可以考虑下是不是异步问题。或者你一步一步调试。应该是可以找出来问题的。
2018-05-16 11:40
3***@qq.com
回复 xiaotutu6000:应该不是异步的问题，这个二维码扫描界面是做了预加载处理。
2018-05-16 11:42
xiaotutu6000
回复 3***@qq.com:你可以切割代码调试下。我看你那个截图中，连摄像头都出来，只是丑了点。应该CSS控制没有按正常的顺序走导致的。
2018-05-16 11:45
1***@qq.com
mui.later(function(){
//创建控件
},500);