微信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>
目录
相关文章
|
6天前
|
存储 安全 小程序
在微信小程序中使用 Vant 时如何确保数据的安全?
在微信小程序中使用 Vant 时如何确保数据的安全?
18 1
|
8天前
|
小程序 开发者
微信小程序之网络数据请求 wx:request的简单使用
这篇文章介绍了微信小程序中如何使用wx.request进行网络数据请求,包括请求的配置、请求的格式以及如何在开发阶段关闭请求的合法检验。
微信小程序之网络数据请求 wx:request的简单使用
|
18天前
|
小程序 JavaScript 开发工具
微信小程序——全局数据共享
微信小程序——全局数据共享
|
17天前
详细教程:扫码提交表单后,数据直接推送到企业微信、钉钉、飞书群聊
在草料制作的表单中,填表人扫码填写并提交数据后,这些信息可以立即通过企业微信、钉钉或飞书自动推送到相应的群聊中,实现即时共享和沟通,提升团队协作效率。
|
2月前
|
小程序 JavaScript 前端开发
微信小程序开发时数据是否是双向数据绑定的
微信小程序开发时数据是否是双向数据绑定的
|
2月前
|
小程序 JavaScript Java
微信小程序+SpringBoot接入后台服务,接口数据来自后端
这篇文章介绍了如何将微信小程序与SpringBoot后端服务进行数据交互,包括后端接口的编写、小程序获取接口数据的方法,以及数据在小程序中的展示。同时,还涉及到了使用Vue搭建后台管理系统,方便数据的查看和管理。
微信小程序+SpringBoot接入后台服务,接口数据来自后端
|
2月前
|
前端开发 JavaScript API
微信公众号项目,实现微信支付(具体流程和参数)
微信公众号项目,实现微信支付(具体流程和参数)
|
3月前
|
XML Java 数据格式
支付系统----微信支付20---创建案例项目--集成Mybatis-plus的补充,target下只有接口的编译文件,xml文件了,添加日志的写法
支付系统----微信支付20---创建案例项目--集成Mybatis-plus的补充,target下只有接口的编译文件,xml文件了,添加日志的写法
|
3月前
|
API
支付系统----微信支付24--APlv3介绍,首先我们要引入支付参数,包含商户号,APPID、API秘钥,数字证书,用代码加载到应用程序当中,之后加载商户私钥,商户需要用私钥进行验签,微信平台接收商
支付系统----微信支付24--APlv3介绍,首先我们要引入支付参数,包含商户号,APPID、API秘钥,数字证书,用代码加载到应用程序当中,之后加载商户私钥,商户需要用私钥进行验签,微信平台接收商
|
3月前
|
算法 安全 数据安全/隐私保护
支付系统---微信支付09------数字签名,现在Bob想要给Pink写一封信,信件的内容不需要加密,怎样能够保证信息的完整性,使用信息完整性的主要手段是摘要算法,散列函数,哈希函数,H称为数据指纹
支付系统---微信支付09------数字签名,现在Bob想要给Pink写一封信,信件的内容不需要加密,怎样能够保证信息的完整性,使用信息完整性的主要手段是摘要算法,散列函数,哈希函数,H称为数据指纹

热门文章

最新文章

下一篇
无影云桌面