第一步引入第三方插件:
npm install –save qrcodejs2
第二步,在vue页面中引用:
<template>
<h2>微信扫码支付</h2>
<div id="qrcode"></div>
</template>
<script>
import QRCode from 'qrcodejs2'
export default {
data() {
return { }
},
methods:{
getCoed() {
let qrcode = new QRCode('qrcode', {
width: 200, // 宽
height: 200, // 高
text: 'weixin://wxpay/bizpayurl?pr=X8D912ad', // 二维码内容,也可以直接放接口获取的数据
// render: 'canvas' // 设置渲染方式(有两种方式 table和canvas,默认是canvas)
// background: '#f0f' // 自定义颜色默认黑白
// foreground: '#ff0'
})
},
}
}
</script>
最终实现效果,微信扫码直接弹出付款页面: