vue项目绘制二维码

本文介绍了一种使用微信扫一扫功能完成易城市APP绑定的方法,通过动态生成二维码实现顾客与APP的快速连接。利用qrcode库在canvas上绘制二维码,并确保在数据回调中正确调用生成方法。

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

import QRCode from 'qrcode'

<div class="center column">
     <div>
          <img src="../../assets/icon/yiCity.png" style="height:364px;width:340px" alt />
          <canvas id="canvas" style="width: 350px;height: 350px;"></canvas>
     </div>
     <div style="font-size:12px;margin-top:30px;">请顾客使用微信扫一扫关注(易城市APP)完成绑定</div>
</div>
//  在获取到数据的回调中去调生成二维码的方法   必须加上定时器,否则会报错
setTimeout( () => {
     this.useqrcode(res.data.qrCode)  // 此为绘画canvas的方法调用
}, 0)
useqrcode(qrCodeUrl){ 
      //生成的二维码内容,可以添加变量
    this.QueryDetail= qrCodeUrl
    // this.QueryDetail = "http://192.168.1.103:8084" + "/shopMemberCard/" + this.shopMemberCardIds + '.html';  携带参数的写法
      console.log(this.QueryDetail)
      var canvas = document.getElementById("canvas")
      QRCode.toCanvas(canvas, this.QueryDetail, function (error) {
        if (error) console.error(error)
        console.log("success");
      })
    }
#canvas{
  width: 50%!important;
  height: auto!important;
  position: absolute;
  left: 127px;
  top: 237px;
}

效果如下

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值