uni-app中如何生成二维码

偏执的太偏执、 2023-07-07 08:25 35阅读 0赞

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

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlbW9udGVhbGlu_size_16_color_FFFFFF_t_70]

### 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、效果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlbW9udGVhbGlu_size_16_color_FFFFFF_t_70 1]  
今天的分享就到这里，我们下次见。see you…

[Thor UI]: http://www.thorui.cn/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlbW9udGVhbGlu_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200222003544776.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlbW9udGVhbGlu,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlbW9udGVhbGlu_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200222005206263.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlbW9udGVhbGlu,size_16,color_FFFFFF,t_70