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

简介: 微信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>
目录
相关文章
|
2月前
|
人工智能 JavaScript 定位技术
微信的接口都有哪些?
【10月更文挑战第17天】微信的接口都有哪些?
183 43
|
2月前
|
JSON 小程序 应用服务中间件
微信的接口wxLogin()的返回值都有什么?
【10月更文挑战第4天】微信的接口wxLogin()的返回值都有什么?
282 1
|
3月前
|
存储 安全 小程序
在微信小程序中使用 Vant 时如何确保数据的安全?
在微信小程序中使用 Vant 时如何确保数据的安全?
50 1
|
2月前
|
JSON 前端开发 API
使用微信JS-SDK调用发票接口的完整开发指南
本文介绍了如何使用微信JS-SDK的`chooseInvoiceTitle`接口来调用微信的发票功能。通过微信发票接口,用户可以选择开具个人或单位发票,并获取相关发票信息,如抬头、税号、公司地址等。在文中,详细描述了JS-SDK的初始化、发票接口的调用方式,并提供了完整的代码示例。文章还介绍了如何处理返回的发票信息,帮助开发者快速集成微信发票功能。
93 2
|
2月前
|
小程序 JavaScript 开发工具
|
2月前
|
移动开发 小程序 数据可视化
微信小程序可视化开发工具之动态数据
微信小程序可视化开发工具之动态数据
46 3
|
3月前
|
小程序 开发者
微信小程序之网络数据请求 wx:request的简单使用
这篇文章介绍了微信小程序中如何使用wx.request进行网络数据请求,包括请求的配置、请求的格式以及如何在开发阶段关闭请求的合法检验。
微信小程序之网络数据请求 wx:request的简单使用
|
3月前
|
小程序 JavaScript 开发工具
微信小程序——全局数据共享
微信小程序——全局数据共享
|
3月前
详细教程:扫码提交表单后,数据直接推送到企业微信、钉钉、飞书群聊
在草料制作的表单中,填表人扫码填写并提交数据后,这些信息可以立即通过企业微信、钉钉或飞书自动推送到相应的群聊中,实现即时共享和沟通,提升团队协作效率。
|
4月前
|
小程序 JavaScript 前端开发
微信小程序开发时数据是否是双向数据绑定的
微信小程序开发时数据是否是双向数据绑定的