前端展示二维码

我们会有扫码，展示数据的需求，比如说我们需要写一个程序，实现扫码取件

已经有很多成熟的第三方库，供我们使用

这里我介绍一个我的解决方案

1、导入 js 文件

文件链接如下：

https://download.csdn.net/download/weixin_44062380/19040087

2、前端页面引入

<script src="js/jquery2.1.4.js"></script>
<script src="js/jquery.qrcode.js"></script>
<!--二维码内容汉化-->
<script src="js/utf.js"></script>

3、前端和 JS 编写

前端：

<div id="qrcode"></div>

JS:

$(function(){var config ={width:300,//值是number类型, 表示的单位是px  必须传递height:300,//值是number类型, 表示的单位是px  必须传递text:"这里是二维码的展示测试",//text就表示二维码中存储的数据  必须传递}$("#qrcode").qrcode(config);});

4、操作步骤

步骤:1.  引入Jquery.js文件2.  引入jquery.qrcode.js文件3.  引入支持中文的编码js文件 (utf.js)4.  在网页中编写一个div 用于显示二维码<div id="div1"></div>5.  准备二维码的规格对象(JSON)var config  = {width:数字,//值是number类型, 表示的单位是px  必须传递height:数字,//值是number类型, 表示的单位是px  必须传递 text:"内容",//text就表示二维码中存储的数据  必须传递correctLevel:数字,//取值为0|1|2|3 表示二维码的纠错级别0:L/1:M/2:Q/3:H ,默认0  可选参数background:"#rrggbb",//默认白色, 表示二维码的后景颜色 可选参数foreground:"#rrggbb",//默认黑色, 表示二维码的前景颜色 可选参数render:"绘制模式"//取值:table/canvas , 默认table 可选参数};6.  通过选择器, 查找到上述的div ,得到Jquery对象, 通过jquery对象的qrcode函数生成二维码$("#div1").qrcode(config);

5、结果展示

前端实现扫码数据展示相关推荐

【笔记3】二维码扫码数据埋点
项目中遇到的问题:1.前台为商品扫码数据埋点(二维码中的链接是外链,不是自己的后台),如果直接放外链的话,是统计不到数据的,所以需要先请求到自己后台,然后重定向外链.2. 二维码中链接如果太长,二维码 ...
前端扫码枪扫码功能坑点集锦
前端扫码枪扫码功能坑点集锦 1.扫码枪无法识别中文问题 2.扫码枪在不同浏览器版本中不触发enter事件问题 3.接收二维码内容输入框设置autofocus属性在某些浏览器版本生效 4.将页面接收数据 ...
LibUsbDotNet2.2.29版本通过usb口，获取扫码盒子扫码数据，读取数据不全和不对
LibUsbDotNet 通过usb口获取扫码盒子扫码数据,读取数据不全和不对. 以下是具体实现代码:在这里插入代码片 public void Open(int vid, int pid) { Usb ...
微信公众平台使用JSSDK网页调起扫码并获取扫码数据（PHP）
微信公众平台使用JSSDK网页调起扫码并获取扫码数据初学者,部分css样式在网上扒下来的,功能实现了,代码很糙,非常糙,望海涵,也希望大神多指导. QQ:961052877,有问题大家一起交流.可以 ...
前端判断扫码的客户端是微信还是支付宝？
前端判断扫码的客户端是微信还是支付宝? User Agent中文名为用户代理,简称 UA,它是一个特殊字符串头,使得服务器能够识别客户使用的操作系统及版本.CPU 类型.浏览器及版本.浏览器渲染引擎. ...
qt5_c++工业上位机自动扫码数据追溯
qt5_c++工业上位机自动扫码数据追溯 Qt5之工业应用一套完整工程,链接PLC,工业无人值守自动扫码使用,无线扫码枪SR1000的使用,使用qt5.14,用qtcreator加载工程后,编译,运 ...
使用扫码枪（二维码，条码）使用键盘钩子获取扫码数据
1.扫描枪获取数据原理基本相当于键盘数据,获取扫描枪扫描出来的数据,一般分为两种实现方式. a)文本框输入获取焦点,扫描后自动显示在文本框内. b)使用键盘钩子,勾取扫描枪虚拟按键,根据按键频率进行手 ...
springboot 整合 freemarker前端模板引擎实现数据展示
一.freemaker 1.简介 FreeMarker是一款模板引擎: 即一种基于模板和要改变的数据, 并用来生成输出文本(HTML网页.电子邮件.配置文件.源代码等)的通用工具. 它不是面向最终用户 ...
1.65亿人次扫码登记的背后，是TBase的秒级返回
本文转自公众号:腾讯大数据继"一部手机游云南"后,抗疫时期,云南在全省范围内的公共场所推广由腾讯云提供技术支持的"云南抗疫情"扫码系统,实现全体民众出行扫码, ...

前端实现扫码数据展示

前端展示二维码

1、导入 js 文件

2、前端页面引入

3、前端和 JS 编写

4、操作步骤

5、结果展示

前端实现扫码数据展示相关推荐

最新文章

热门文章