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

微信二维码之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 - canvas

优点：生成canvas二维码，兼容IE浏览器

npm install qrcodejs2 --save

import QRCode from 'qrcodejs2'

<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）
          })
        })
      }
    }
 }