前端vue uni-app基于uQRCode封装简单快速实用全端二维码生成插件

快速实现基于uQRCode封装简单快速实用全端二维码生成插件; 下载完整代码请访问uni-app插件市场地址：https://ext.dcloud.net.cn/plugin?id=12677

效果图如下：

代码如下：
# 基于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>

```

---