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