微信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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/72817.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Oracle数据库环境变量配置以及可能遇到的问题解决

一、如何配置Oracle数据库环境变量&#xff08;以win10为例&#xff09; 1、找到此电脑&#xff0c;鼠标右键&#xff0c;点击属性。 2、点击属性成功后&#xff0c;进入如下页面&#xff0c;找到“高级系统设置”&#xff0c;点击进入。 3、找到环境变量&#xff0c;点击进入…

Capstone 反汇编引擎

文章目录 前言一、Capstone简介二、示例代码 前言 介绍了capstone反汇编引擎的用法 一、Capstone简介 Capstone 是一个轻量级的多平台、多架构的反汇编框架&#xff0c;用纯 C 语言实现。可以说它是如今世界上最优秀的反汇编引擎&#xff0c;IDA&#xff0c;Radare2&#xf…

Unity Inspector面板上显示Api

serializeField】——将私有类型和保护类型可视化到面板上【System.serializeField】——将自定义类型可视化到面板上【HideIninspector】——将公共变量隐藏【Header&#xff08;“分组说明”&#xff09;】——将可视化变量进行分组【Tooltip&#xff08;“内容说明”&#x…

STM32F4X RTC

STM32F4X RTC 什么是RTCSTM32F4X RTCSTM32F4X RTC框图STM32F4X RTC计数频率STM32F4X RTC日历STM32F4X RTC闹钟 STM32F4X RTC例程 什么是RTC RTC全程叫Real-Time Clock实时时钟&#xff0c;是MCU中一个用来计时的模块。RTC的一个主要作用是用来显示实时时间&#xff0c;就像日常…

pip安装skimage的方法

在安装skimage时&#xff0c;可能会报错误&#xff1a; 可以尝试&#xff1a;pip install scikit-image进行安装&#xff0c;使用时只需要&#xff1a;import skimage

介绍一些开发用到的工具

Sourcetree &#xff1a;Git 界面操作工具&#xff0c;真心好用 uTool&#xff1a;效率工具平台&#xff0c;可以了解一下&#xff0c;提供了很多强大的工具&#xff0c;加强了对电脑的操作 MobaXterm&#xff1a;带有 X11 服务器、选项卡式 SSH 客户端、网络工具等的增强型 Wi…

《消息队列》专栏介绍

《消息队列》专栏介绍 目录 《消息队列》专栏介绍专栏导言什么是消息队列呢&#xff1f;应用场景&#xff08;作用&#xff09; 为什么要用消息队列呢&#xff1f;异步处理削峰填谷 举个例子 分布式消息队列的优势 应用解耦优点发布订阅优点 分布式消息队列应用场景不同消息队列…

武警三维数字沙盘电子沙盘虚拟现实模拟推演大数据人工智能开发教程第15课

部队三维数字沙盘电子沙盘虚拟现实模拟推演大数据人工智能开发教程第15课 现在不管什么GIS平台首先要解决的就是数据来源问题&#xff0c;因为没有数据的GIS就是一个空壳&#xff0c;下面我就目前一些主流的数据获取 方式了解做如下之我见&#xff08;主要针对互联网上的一些…

Linux之Shell概述

目录 Linux之Shell概述 学习shell的原因 shell是什么 shell起源 查看当前系统支持的shell 查看当前系统默认shell Shell 概念 Shell 程序设计语言 Shell 也是一种脚本语言 用途 Shell脚本的基本元素 基本元素构成&#xff1a; Shell脚本中的注释和风格 Shell脚本编…

期货基础知识

一、期货是什么&#xff1f;  期货是与现货相对应&#xff0c;并由现货衍生而来。期货通常指期货合约&#xff0c;期货与现货完全不同&#xff0c;现货是实实在在可以交易的货&#xff08;商品&#xff09;&#xff0c;期货主要不是货&#xff0c;而是以某种大众产品如棉花、大…

2023-大数据应用开发-工业数据实时处理-参考结果

工业数据实时处理-答案 任务一&#xff1a;实时数据采集 1、 在主节点使用Flume采集/data_log目录下实时日志文件中的数据&#xff0c;将数据存入到Kafka的Topic中&#xff08;Topic名称分别为ChangeRecord、ProduceRecord和EnvironmentData&#xff0c;分区数为4&#xff09…

vue响应式详解

1. 响应式的定义 我们都知道&#xff0c;vue是基于javascript的&#xff0c;那我们使用一段javascript代码来描述响应式 let a 1,b 1,c; c a b; console.log(c) // 输出 2 // 改变 a的值 a 3; // 重新给c赋值 即把 c a b; 再执行一遍c的值才能变为 4 // c a b; // …

基于SpringBoot的无忌在线考试系统(源码+讲解+调试运行)做毕设课设均可

技术栈 前后端分离 前端使用: Vue Element Plus 后端使用: SpringBoot Mysql8.0 Mybatis-Plus 功能 分为 管理员端 和 老师端 和 学生端 管理员端 登陆页 ​科目管理 查看所有科目 ,增加 ,修改 ,删除科目 , 模糊搜索课程 ​考试管理 查看所有考试 ,增加 ,修改 ,删除考试 题库…

java8-17 --- Stream流

一、StreamAPI实例化 /*** 通过集合创建Stream流*/Testpublic void test1(){ArrayList<Integer> arrayList new ArrayList<>();//返回一个顺序流Stream<Integer> stream arrayList.stream();//返回一个并行流Stream<Integer> integerStream arrayLi…

小白学go基础05-变量声明形式

和Python、Ruby等动态脚本语言不同&#xff0c;Go语言沿袭了静态编译型语言的传统&#xff1a;使用变量之前需要先进行变量的声明。 变量声明形式使用决策流程图 这里大致列一下Go语言常见的变量声明形式&#xff1a; var a int32 var s string "hello" var i 13 …

【RabbitMQ】RabbitMQ 服务无法启动。系统出错。发生系统错误 1067。进程意外终止。

问题描述 RabbitMQ 服务无法启动。 rabbitmq-service.bat startRabbitMQ 服务正在启动 . RabbitMQ 服务无法启动。系统出错。发生系统错误 1067。进程意外终止。原因分析 RabbitMQ和Erlang版本不匹配。 解决方案 查询并安装RabbitMQ版本对应Erlang版本 https://www.rabbitm…

如何指定this

<script>/*如何指定this的值可以通过2类方法指定1.调用时指定1.1call方法1.2apply方法2.创建时指定2.1bind方法2.2箭头函数*/// ------1.调用时指定------//1.1call方法:挨个传入参数//1.2apply方法:数组形式传入参数function foo (numA, numB) {console.log(this)consol…

自动化测试基础知识详解

前言 有颜色的标注主要是方便记忆&#xff0c;勾选出个人感觉的重点 块引用&#xff1a;大部分是便于理解的话&#xff0c;稍微看看就行&#xff0c;主要是和正常的文字进行区分的 1、什么是自动化测试 自动化测试是软件测试活动中一个重要分支和组成部分&#xff0c;随着软…

一加11/Ace2/10Pro手机如何实现全局120HZ高刷-游戏超级流畅效果

已经成功root啦。安卓13目前也一样支持LSPosed框架&#xff0c;如果你对LSP框架有需求&#xff0c;也可以使 自测120HZ刷新率诞生以后&#xff0c;很多小伙伴用上了就很难回来啦&#xff0c;一加11/Ace2/10Pro/9pro手 机厂商也对新机做了很多的适配&#xff0c;让我们日常使用起…

防重复提交:自定义注解 + 拦截器(HandlerInterceptor)

防重复提交&#xff1a;自定义注解 拦截器&#xff08;HandlerInterceptor&#xff09; 一、思路&#xff1a; 1、首先自定义注解&#xff1b; 2、创建拦截器实现类&#xff08;自定义类名称&#xff09;&#xff0c;拦截器&#xff08;HandlerInterceptor&#xff09;; 3…