前端vue uni-app基于uQRCode封装简单快速实用全端二维码生成插件
快速实现基于uQRCode封装简单快速实用全端二维码生成插件; 阅读全文下载完整代码请关注微信公众号： 前端组件开发
效果图如下：
代码如下：
# 基于uQRCode封装简单快速实用全端二维码生成插件
#### 使用方法
```使用方法
#引入js文件
import uQRCode from '@/common/uqrcode.js'
<view class="canvas">
<!-- 二维码插件 width height设置宽高 -->
<canvas canvas-id="qrcode" :style="{width: `${qrcodeSize}px`, height: `${qrcodeSize}px`}" />
</view>
```
#### HTML代码部分
```html
<template>
<view class="content">
<view class="canvas">
<!-- 二维码插件 width height设置宽高 -->
<canvas canvas-id="qrcode" :style="{width: `${qrcodeSize}px`, height: `${qrcodeSize}px`}" />
</view>
<text class="list-text">{{ '预约号码:' + ' ' + this.myFormatData.yyh}}
</text>
<text class="list-text"> {{ '预约窗口:' + ' ' + this.myFormatData.bsdmc}}
</text>
<text class="list-text"> {{ '业务类型:' + ' ' + this.myFormatData.Yylxmc}}
</text>
<text class="list-text"> {{ '预约日期:' + ' ' + this.myFormatData.yyrq}}
</text>
</view>
</template>
```
#### JS代码 （引入组件 填充数据）
```javascript
<script>
import Vue from 'vue';
import uQRCode from '@/common/uqrcode.js'
export default {
data() {
return {
// 二维码标识串
qrcodeText: '',
// 二维码尺寸
qrcodeSize: 136,
// 最终生成的二维码图片
qrcodeSrc: '',
myFormatData:{'yyh':'eoruw20230528','bsdmc':'窗口1','Yylxmc':'租金缴纳','yyrq':'预约日期'},
}
},
onLoad(e) {
this.make();
},
methods: {
make() {
uni.showLoading({
title: '二维码生成中',
mask: true
})
uQRCode.make({
canvasId: 'qrcode',
text: this.qrcodeText,
size: this.qrcodeSize,
margin: 10,
success: res => {
this.qrcodeSrc = res
console.log('qrcodeSrc = ' + this.qrcodeSrc);
},
complete: () => {
uni.hideLoading()
}
})
},
}
}
</script>
```
#### CSS
```CSS
<style>
page {
}
.content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: var(--status-bar-height);
}
.text {
display: flex;
justify-content: center;
margin-top: 46rpx;
margin-bottom: 6rpx;
font-size: 36rpx;
height: 44rpx;
color: #333333;
}
.canvas {
margin-top: 50rpx;
margin-bottom: 36rpx;
text-align: center;
}
.list-text {
display: flex;
justify-content: center;
width: 100%;
line-height: 60rpx;
font-size: 28rpx;
color: #666666;
}
.button {
width: 88%;
margin-top: 52rpx;
}
</style>
```
