uni-app中如何生成二维码

最近发现在uni-app的插件市场中找的二维码插件，用是能用，但是在控制台会报错：‘data’ of undefined。这样就不友好了，然后我想起来挺久之前我有看到过一个生成二维码的插件，这个插件在 Thor UI中可以找到（ Thor UI）。下面就让我分享一下这个好用的插件。

1、这个插件的作者是echo，echo写了整个Thor UI组件，我个人很佩服他，喜欢他的可以去Thor UI网站看看，学习一下。

2、使用方法

（1）首先下载你需要下载weapp-qrcode.js（百度网盘下载链接：链接：https://pan.baidu.com/s/1VXhq3ZjxmDcH1tFujKg75Q
提取码：vj2y）
（2）在你的uni-app项目中需要的地方引入下载的weapp-qrcode.js文件。在标签中引入，如下

const qrCode = require('@/common/weapp-qrcode.js')

（3）使用（整个代码）

<template>
	<view>
		<view class="qrcode">
			<canvas style="width: 200upx;height: 200upx;" canvas-id="couponQrcode"></canvas>
		</view>
		<view class="title">
			生成二维码
		</view>
	</view>
</template>

<script>
	const qrCode = require('@/common/weapp-qrcode.js')
	export default {
		data() {
			return {

			}
		},
		onLoad() {
			setTimeout(() => {
				this.couponQrCode()
			}, 50)
		},
		methods: {
			// 二维码生成工具
			couponQrCode() {
				new qrCode('couponQrcode', {
					text: "http://www.baidu.com",
					width: 100,
					height: 100,
					colorDark: "#333333",
					colorLight: "#FFFFFF",
					correctLevel: qrCode.CorrectLevel.H
				})
			}
		}
	}
</script>

<style>
	.qrcode {
		padding: 50upx 0 20upx 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.title {
		text-align: center;
	}
</style>

3、效果

今天的分享就到这里，我们下次见。see you…