测试方法: 多个扫码框支持的办法,通过引入一个参数来区分及使用localStorage保证之前扫到的数据不丢失
测试效果: 页面打开后尝试点击不同的扫码按钮去扫描看看,会发现扫的值不会错乱,都会显示到对应的输入框中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<title>微信h5扫码接口范例:多个扫码框支持的办法,通过引入一个参数来区分及使用localStorage保证之前扫到的数据不丢失</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<input type="text" id="aaa"> <input type="button" class="saoma" value="scan" data-id="1"><br><br>
<input type="text" id="bbb"> <input type="button" class="saoma" value="scan" data-id="2"><br><br>
<script type="text/javascript">
loadSet();//页面进入时就将之前保存的数据填到表单
var qr=GetQueryString("qrresult");
if(qr){
if(GetQueryString("tag")==1){
document.all.aaa.value=qr;
}else if(GetQueryString("tag")==2){
document.all.bbb.value=qr;
}
}
$(".saoma").click(function() {
saveSet();//扫码前保存表单数据
window.open("//996315.com/api/scan/?redirect_uri=http://wbyx.cn/saoma2.htm?tag=" + $(this).attr("data-id"), "_self");
//说明:这里的http://wbyx.cn/saoma2.htm?tag=请改成你自己的网址。其中参数名tag你可以自己随意起名,只要前后保持一致就行,后面的值是用的按钮的data-id属性值。
});
function GetQueryString(name){
var reg = new RegExp("\\b"+ name +"=([^&]*)");
var r = location.href.match(reg);
if (r!=null) return decodeURIComponent(r[1]);
}
//载入数据到表单,如果你有其他数据要保存也可以在下面增加,注意保存函数那儿也照样增加
function loadSet(){
$("#aaa").val( localStorage.getItem("aaa") );
$("#bbb").val( localStorage.getItem("bbb") );
}
//保存表单数据
function saveSet(){
localStorage.setItem("aaa", $("#aaa").val());
localStorage.setItem("bbb", $("#bbb").val());
}
</script>
</html>