uni-app中如何生成二维码

本文分享了在uni-app中使用ThorUI的二维码插件方法,包括下载weapp-qrcode.js,项目中引入及使用代码,展示了如何生成自定义二维码。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

最近发现在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…

评论 10
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值