qrcodejs2实现前端生成二维码且实时刷新

Oh No 发量又少了

已于 2022-06-18 16:35:32 修改

阅读量5.9k

点赞数 8

CC 4.0 BY-SA版权

分类专栏： vue 前端文章标签：前端 javascript vue.js

于 2022-06-16 15:56:04 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_45566730/article/details/125304291

本文介绍了如何在前端使用qrcodejs2库生成二维码，并实现二维码的实时刷新。通过设置定时器每隔3秒向后端请求新的数据，生成的二维码数据由后端加密存储，前端负责解码并显示。为解决新二维码不断叠加的问题，文章提出了更新二维码元素而非创建新元素的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本篇文章基于前端Vue框架

基本使用

安装：
npm install qrcodejs2 --save
引入：
import QRCode from 'qrcodejs2'
然后在Vue的HTML代码中定义一个真实div并且用ref属性进行标识

<div class="qrcode" ref="qrCodeUrl"></div>

下面是JavaScript中的代码

createQrcode() {
   
   
	var qrcode = new QRCode(this.$refs.qrCodeUrl,{
   
   
		text:'张三李四王二麻子',//可以是链接，也可以是文本

最低0.47元/天解锁文章

200万优质内容无限畅学

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Oh No 发量又少了

关注关注

8
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

三、unaipp小程序二维码生成

张先森的博客

09-18

1617

unaipp小程序二维码生成

Nuxt - 解决引入 qrcodejs2.js / QRCode.js 报错（document is not defined）

资深程序员

08-24

3783

Nuxt-解决引入qrcodejs2.js/QRCode.js报错（documentisnotdefined），nuxt.js如何使用qrcodejs2.js/QRCode.js二维码插件？nuxt使用QRCode.js生成二维码，nuxt项目中使用qrcode，Nuxt.js不能用npm安装插件，原本是vue写的，改用nuxt.js项目后qrcodejs2.js/QRCode.js报错，nuxt使用qrcodejs2，nuxt使用QRCode.js生成二维码，j

参与评论您还未登录，请先登录后发表或查看评论

QRCode.js：使用js快速生成二维码

01-08

QRCode.js：使用js快速生成二维码 1.何为QRCode.js? QRCode.js是用于生成qrcode(二维码)的javascript库。QRCode.js通过HTML5 Canvas和DOM中的表格标签支持跨浏览器。QRCode.js不依赖任何其他库。首先需要下载QRCode文件下载地址 http://davidshimjs.github.io/qrcodejs/ 2.基本用法 new QRCode(document.getElementById(qrcode),https://i.csdn.net/#/uc/profile); 3.在网页快速生成二维码的dem

qrcode和qrcodejs2生成二维码+刷新

weixin_45859470的博客

05-22

1840

1、使用qrcode生产二维码，封装组件。2、使用qrcodejs2点击生成二维码。创建Qrcode.vue文件。

如何通过接口实现动态二维码的定时刷新

最新发布

weixin_29218509的博客

05-31

感觉本篇对你有帮助可以关注一下我的微信公众号（深入浅出谈java），会不定期更新知识和面试资料、技巧！！！在Web应用中，动态二维码常用于以下场景：1、整体流程1、请求后端接口（按照现有项目格式即可）2、后端接口的返回类型定义（byte[]）3、前端接收时定义响应类型（重点：responseType: 'arraybuffer'）4、对后端返回数据进行转化：arrayBufferToBase645、对数据和标签进行绑定1、获取后端 二维码 图片接口上面部分用到的代码: member-code.js 请

vue使用qrcode实现生成二维码和刷新二维码

路人贾！

04-19

1977

vue使用qrcode实现生成二维码和刷新二维码

vue+qrcodejs2+二维码可根据参数刷新

weixin_46562974的博客

07-02

1910

1.安装 qrcodejs2 npm install qrcodejs2 --save 2.引入资源 importQRCodefrom"qrcodejs2"; 3.写入html <divid="qrcode"ref="qrCodeDiv"></div> 4.生成二维码 data(){ return{ text:"", userid:null， id:"" ...

qrcodejs2二维码生成

Establish_bug的博客

11-06

1310

在vue下载qrcodejs2 yarn add qrcodejs2 可以开始引用： <template> <div> <div id="qrcode"></div>  </div> </template> <script&...

vue qrcode生成二维码，并监控失效刷新二维码

qq_21631111的博客

03-20

8118

效果图 1.首先安装插件 npm install qrcodejs2 --save 2.html代码 <div class="qrcode" ref="qrCodeUrl" ></div> <h1 class="faceCode-shade pa" v-if="isTimeout"> <p>二维码已失效</p> <a @click="refresh()">刷新</a> </h1> isTimeo

qrcodejs2官网

08-12

- *1* *2* *3* [qrcodejs2实现前端生成二维码且实时刷新](https://blog.csdn.net/weixin_45566730/article/details/125304291)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_...

在React项目中使用Qrcode.react并实现下载以及刷新功能

Circle_Key的博客

05-15

2706

【代码】在React项目中使用Qrcode.react并实现下载以及刷新功能。

js动态二维码程序.......

12-27

js生成动态不断更新的含参二维码，主要是引入qrcode.js库，自动更新的时间间隔可以自己设置。..................

二维码生成js包,QRCode新旧版本各二种

01-10

各位大大下载完后, 请看里面的注意事项 , 然后本人给各位大大准备了两种版本的jar包.希望多多打赏

vue 动态生成二维码并显示在页面上实时刷新

hepengtao0001的博客

08-22

4979

动态生成二维码并显示在页面上动态刷新动态生成二维码并显示在页面上动态刷新业务场景：后端传回来一组数据，数据内容是一个数组中有n个对象，对象的其中一个属性是一串字符串类型的数字，现在需要将这个数字都转为二维码，并显示在页面上。效果：字符串转二维码需要用到 qrcodejs2插件 1.安装插件 npm install qrcodejs2 --save 2.在javascript中引入 import QRCode from ‘qrcodejs2’` 3.Html中 <div class="bo

如何制作二维码定时刷新的效果？

Towify的博客

11-10

2345

本文详解了如何制作二维码定时刷新的效果步骤。欢迎大家试用我们的无代码开发平台 Towify 制作自己的微信小程序。

vue项目使用qrcodejs2生成二维码

有梦想的咸鱼的博客

02-06

1434

总结下，以后用到方便，最近做项目用到根据前端的入参生成二维码，手机访问跳到H5页面 1.引入qrcodejs2 cnpm install qrcodejs2 2.HTML !-- 二维码弹框 -->  <el-button type="primary" @click="payOrder"&gt...

关于二维码刷新[自己的小垃圾研究]

CherryChen

03-16

5977

今天刚好在写一个在线二维码的刷新，每间隔1分钟进行刷新，android的机制导致了如果android App在后台运行的化，会一直走，这样用户的流量什么的完全耗不起，顾有了下面的小小研究。导致流量走的比较快的原因如下： 1.访问数据的流量，这个和后端接口查询等有很大的关系，然而本宝并不能怎么样，这里接口端的兄弟可以优化下。 2.多次访问数据会导致流量使用比较多作为android开发，研...

利用QRCode.js生成动态二维码页面

学IT，找陈寒

11-22

4840

QRCode.js是一个轻量级的JavaScript库，用于在网页中生成二维码。它简单易用，通过在网页中插入一个QRCode对象，就可以轻松地生成二维码图像。在这个例子中，我们将使用QRCode.js生成一个简单的文本信息二维码，并通过按钮刷新二维码内容。通过QRCode.js库，我们可以轻松实现在网页中生成二维码，并通过JavaScript实现二维码内容的动态更新。这为网页开发中一些需要生成二维码的场景提供了便捷的解决方案。

vue - 使用qrcodejs2生成二维码