测试方法: 多个扫码框支持的办法,通过引入一个参数来区分及使用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>