文章目录

• • • 项目需求
    • 解决问题
    • • 1. qrious.js插件
      • 2. 简单认识 qrious 配置参数
      • 3.现实二维码生成
      • 4. 核心代码

项目需求

uniapp 开发 H5 过程中会有邀请、分享等相关的需求。邀请与分享的 url地址 要以 二维码 的形式进行展示，并且 url地址 是动态可变化。

解决问题

1. qrious.js插件

在 npm 中有一个叫 Qrious 二维码生成插件；

npm install qrious --save

2. 简单认识 qrious 配置参数

参数	类型	默认值	说明
value	String	空	需要编码为二维码的值、url字符
size	Number	100	二维码的尺寸，单位像素
level	String	L	二维码的误差校正级别(L, M, Q, H)
mime	String	image/png	二维码输出为图片时的MIME类型
foreground	String	black	二维码的前景颜色
background	String	white	二维码的背景颜色

3.现实二维码生成

话不多说看代码：

<template>
	<view class="content">
		<view class="popup" v-if="show">
			<view style="position: relative;" @tap="show = false">
				<image :src="qrCodeImage" class="custom-qrcode" />
			</view>
		</view>
		<button @tap="getQriousCode" v-else>立即邀请</button>
	</view>
</template>
<script>
	import Qrcode from 'qrious';
	export default {
		data() {
			return {
				title: 'Hello',
				show: false,
				qrCodeImage: ''
			}
		},
		methods: {
			getQriousCode() {
				this.show = true;
				let qr = new Qrcode({
					value: "www.baidu.com"
				});
				this.qrCodeImage = qr.toDataURL();
			},
		}
	}
</script>
<style>
	.content {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100%;
		width: 100%;
	}

	.popup {
		height: 100%;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background: rgba(135, 135, 135, 0.6);
	}

	.custom-qrcode {
		width: 300rpx;
		height: 300rpx;
	}
</style>

4. 核心代码

根据需求改变相关参数，获得想要的结果。

getQriousCode() {
	this.show = true;
	let qr = new Qrcode({
		value: "https://blog.csdn.net/weixin_49175501", // url地址
		background:'white', // 背景色
		foreground:'#8dc63f' ,// 二维码颜色
		level:'L', // 二维码复杂程度
		size:200 ,// 尺寸大小
		mime:'image/png' // 图片类型
	});
	this.qrCodeImage = qr.toDataURL();	// 生成url图片	
},

---

有疑惑的小伙伴，可能是我表达不清楚，可以留言讨论，如有错误，也希望大家不吝指出。