vue——微信二维码显示vue-qr/qrcodejs2

悠悠 2022-09-14 11:22 337阅读 0赞

## 微信二维码之vue-qr/qrcodejs2 区别 ##

### vue-qr ###

弊端：当后端微信返回二维码，不兼容IE浏览器

npm install vue-qr --save

main.js
    import vueQr from 'vue-qr'
    Vue.use(vueQr)

<vue-qr :text="qrCode" :margin="0" colorLight="#fff" :logoSrc="require('./../../assets/wpay.svg')" :logoScale="0.2" :size="200"></vue-qr>
    // qrCode获取到的后端二维码

### qrcodejs2 + html2canvas ###

优点：将二维码转化成图片，兼容IE浏览器

npm install qrcodejs2 --save
    npm install html2canvas --save

import QRCode from 'qrcodejs2'
    import html2canvas from 'html2canvas'

<div class="div-code">
       <div id="qrcode1" ref="qrcode1"></div> // 二维码容器
       <img src="./../../assets/wpay.svg" alt="" class="pay-logo">
    </div>
    
    data () { 
    	return { 
    		QRCode: ''
    	}
    }
    methods: { 
        // 获取支付二维码
        async getPayInfo () { 
          const {  code, data } = await this.$api.api模块名.方法名()
          if (code === '0') { 
            this.QRCode = data.QRCode
            this.$nextTick(() => { 
              document.querySelector('#qrcode1').innerHTML = ''
              return new QRCode(this.$refs.qrcode1, { 
                width: 220, // 宽
                height: 220, // 高
                text: this.QRCode, // 生成二维码的内容
                render: 'canvas', // 设置渲染方式（canvas,table 默认canvas）
                correctLevel: QRCode.CorrectLevel.L // 二维码纠错级别（L,M,Q,H）
              })
            })
            this.createPicture()
          }
        },
        // 生成图片
        createPicture () { 
          html2canvas(document.querySelector('#qrcode'))
            .then(canvas => { 
              let imgData = canvas.toDataURL('image/jpeg')
              this.QRCode = imgData
            })
            .catch()
        }
     }