最近在找移动端绘制二维码的问题 ,直接上代码
下载 weapp-qrcode.js(可以通过npm install weapp-qrcode --save 下载,之后把它父子到untils目录下)
npm install weapp-qrcode --save
在组件页面使用
<canvas id="couponQrcode" canvas-id="couponQrcode" style="width:380rpx; height: 380rpx"></canvas>
<script>//引入const qrCode = require('@/untils/weapp-qrcode.js');data() {return {QrCode:""//二维码地址}},methods:{init(){//假设后台返回的数据res={url:'',//二维码地址}this.QrCode=res.url;this.setCode()},setCode(){this.$nextTick(() => {const rpx2px = this.createRpx2px();let that=thisnew qrCode('couponQrcode', {text: this.QrCode,//必须,二维码内容width: rpx2px(190 * 2),//必须,二维码宽度height: rpx2px(190 * 2),//必须,二维码高度colorDark: '#000000',colorLight: '#FFFFFF',correctLevel: qrCode.CorrectLevel.L, // 非必须,二维码纠错级别,默认值为高级,取值:{ L: 1, M: 0, Q: 3, H: 2 }});}},// 自适应转成rpxcreateRpx2px() {const { windowWidth } = uni.getSystemInfoSync();return function (rpx) {return (windowWidth / 750) * rpx;};},},}
</script>