微信h5扫码接口范例:多个扫码框支持的办法,通过引入一个参数来区分及使用localStorage保证之前扫到的数据不丢失

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

猜你喜欢

转载自blog.csdn.net/sysdzw/article/details/132768015
今日推荐