1.背景描述：在页面上点击显示二维码图标，然后以弹窗的形式将二维码展示出来
2.效果如下：
3.代码如下：
<template>
<view>
<!-- 二维码 -->
<view @click="showQRcode">二维码</view>
<!-- 显示二维码弹窗 -->
<uni-popup ref="qrCode"
@touchmove.stop.prevent="handleMoveQrcode"
:maskClick="false"
>
<view class="qrcode-container">
<view class="qrcode-box">
<canvas canvas-id="canvas" style="width:200px;height:200px;margin:0 auto;"></canvas>
<view class="qrcode-title">测试二维码</view>
</view>
<image class="close-img" src="关闭图片路径" @click="handleCloseQrcode"></image>
</view>
</uni-popup>
</view>
</template>
<script>
import QRCode from 'qrcode.js'
export default {
data(){
return {
}
},
methods:{
showQRCode(){
this.$refs.qrCode.open();
// 绘制二维码
let qrcode = new QRCode('canvas',{
usingIn: 'id',
text: '二维码路径',
width: 200,
height: 200,
colorDark: '#000', //二维码主题颜色
colorLight: '#fff', //二维码背景颜色
correctLevel: QRCode.CorrectLevel.H
});
// 重置二维码
qrcode.makeCode('二维码路径');
},
handleCloseQrcode(){
this.$refs.qrCode.close()
},
handleMoveQrcode(){
return false;
}
}
}
</script>
<style>
.qrcode-container{
width: 480rpx;
height: 560rpx;
}
.qrcode-box{
width:100%;
height: 440rpx;
padding-top: 20rpx;
background-color: #fff;
}
.qrcode-title{
width: 100%;
text-align: center;
font-weight: bold;
font-size: 36rpx;
}
</style>
4.注意事项
第一点： 在弹窗里面绘制二维码，在手机上面会出现滚动问题，样式不好看，解决方案：
在弹窗 uni-popup 上面添加 @touchmove.stop.prevent='moveFun'
moveFun(){ return false } 即可解决。
第二点： 绘制二维码时，二维码样式可能会出现偏差，绘制不全问题，解决方案：
首先 canvas 设置width，height时需要带px单位，rpx不认。
其次，canvas标签设置width，height跟绘制时设置width,height要保持一致，例如都是width:200,height:200这种