vue使用qrcodejs2生成二维码
做微信支付,通过后端返回的地址生成二维码。1. 安装qrcodejs2npm installqrcodejs2 --save2. 使用<template><div class="pointer" ref="qrcode" @click="execute"></div></template><script>import QRCode fro
·
做微信支付,通过后端返回的地址生成二维码。
1. 安装qrcodejs2
npm install qrcodejs2 --save
2. 使用
<template>
<div class="pointer" ref="qrcode" @click="showQRcode"></div>
</template>
<script>
import QRCode from 'qrcodejs2'
export default {
name: '',
props: {},
components: {
},
computed: {},
data() {
return {
link: '', // 二维码地址
}
},
mounted() {},
methods: {
//微信支付
/**
* @description 生成二维码
* @param {number} qWidth 宽度
* @param {number} qHeight 高度
* @param {string} qText 二维码内容(跳转连接)
* @param {string} qRender 渲染方式(有两种方式 table和canvas,默认是canvas)
*/
qrcode(qWidth, qHeight, qText, qRender) {
let el = this.$refs.qrcode
new QRCode(el, {
width: qWidth,
height: qHeight,
text: qText,
render: qRender
})
},
// 获取微信二维码
showQRcode(params) {
//二维码初始化
this.$refs.qrcode.innerHTML = ''
this.getQRCode(params).then((res) => {
this.link = res.payUrl
this.orderId = res.orderId
this.qrcode(200, 210, this.link, 'canvas')
})
}
}
}
</script>
<style lang="scss" scoped>
</style>
更多推荐
已为社区贡献3条内容
所有评论(0)