其实qrscanner这个插件没什么大问题,唯一的问题就是在某些手机上,某些时候会出现第一次打开的时候无法启动相机预览,准确的来说是相机预览已经是打开了,但是被一层白色的给挡住了,研究半天没找到原因,但是解决方法给琢磨出来了,就是调用相机预览之前先销毁一次扫码功能。
代码如下:
//扫描支付
$("#scan-text").html("Scan");
if (typeof QRScanner != "undefined") {
// 如果没有权限就获取并扫码
QRScanner.prepare(onDone);
} else {
// 请求权限失败
weihuan_tips("Scan code failed to load...", "center", 2000);
}
function onDone(err, status) {
//启动之前先销毁一次
QRScanner.destroy();
if (err) {
console.error(err);
}
//如果得到权限
if (status.authorized) {
// 开始扫码
$("body").css({
background: "transparent"
});
QRScanner.scan(displayContents);
$("#scan-text").html("Scanning code...");
function displayContents(err, text) {
// 扫码失败
if (err) {
weihuan_tips("Start scanning code error...", "center", 2000);
} else {
// 扫码成功
app.dialog.progress();
var scan_user_id = localStorage.getItem("user_id");
var rece_user_id = GetUrlPara("user_id", text);
var type = GetUrlPara("type", text);
if (type == 2) {
$.ajax({
url: api + "scan-success.php",
data: {
type: type,
scan_user_id: scan_user_id,
rece_user_id: rece_user_id
},
type: "POST",
async: true,
timeout: 5000,
dataType: "json",
success: function(data) {
if (data.code == 200) {
app.dialog.close();
$("#scan-text").html("Scanning code successfully");
homeView.router.navigate("/scan-pay/", {
context: {
ID: data.ID,
user_id: rece_user_id,
user_name: GetUrlPara("user_name", text)
}
});
} else {
app.dialog.close();
QRScanner.prepare(onDone);
}
}
});
}
}
}
} else {
// 如果没有
weihuan_tips(
"Please give the app permission with camera...",
"center",
2000
);
}
}