uniapp 生成二维码

uniapp 生成二维码

链接: https://pan.baidu.com/s/1RG78CnSXkJNKLY0Mz2NzCQ 提取码: qiz7

第一步
在下方链接里下载文件
链接: https://pan.baidu.com/s/1RG78CnSXkJNKLY0Mz2NzCQ 提取码: qiz7
第二步
在文件中找到wxqrcode.js这个文件 然后按照下方步骤依次操作即可。

这样就大功告成了。
页面全部代码：

<template>
	<view class="temporary_box">
		<view class="temporary">
			<view class="communityName">我的小区</view>
			<view class="unitName">12栋1单元206房</view>
			<view class="phone">
				<view class="mame">aa</view>
				<view class="phoneImg_box">
					19993455546
					<image class="phoneImg" src="../../../../static/visiting/phone.png"></image>
				</view>
			</view>
			<view class="QRCodeBox">
				<view class="QRCode">
					<image class="QRimg" :src="qr"></image>
				</view>
			</view>
			<view class="messBox">
				<view class="visitTitle">访客信息</view>
				<view class="visitItem" v-for="(item,index) in messList" :key='index'>
					<view class="title">
						{{item.name}}
					</view>
					<view class="content">
						{{item.value}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Qr from "@/utils/wxqrcode.js"
	export default {
		components: {},
		data() {
			return {
				qr: '',
				messList: [{
						name: '访客姓名',
						value: '唐小鸭'
					},
					{
						name: '访客性别',
						value: '男'
					},
					{
						name: '手机号码',
						value: '622826199608131133'
					},
					{
						name: '身份证号',
						value: '唐小鸭'
					},
					{
						name: '到访日期',
						value: '2022.08.05'
					},
				]
			}
		},
		onShow() {
			this.getQr()
		},
		methods: {
			getQr() {
				this.qr = Qr.createQrCodeImg('https://www.baidu.com') 
			}
		}
	}
</script>

<style lang="scss" scoped>
	.temporary_box {
		width: 100%;
		background-color: #B6D4FC;
		padding-top: 100rpx;

		.temporary {
			background: #FFFFFF;
			box-shadow: 0 -24rpx 30rpx 0 rgba(0, 0, 0, 0.06);
			border-radius: 100rpx 100rpx 0 0;
			padding: 60rpx 0 45rpx 0;

			.communityName {
				width: 100%;
				text-align: center;
				font-size: 40rpx;
				font-weight: 600;
				color: #4F93FF;
			}

			.unitName {
				font-size: 28rpx;
				font-weight: 400;
				color: #999999;
				text-align: center;
				margin: 14rpx 0 24rpx 0;
			}

			.phone {
				height: 48rpx;
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				box-sizing: border-box;
				color: #333333;

				.phoneImg_box {
					display: flex;
					align-items: center;
					margin-left: 40rpx;
				}

				.mame {
					font-size: 28rpx;
					font-weight: 600;

				}

				.phoneImg {
					height: 48rpx;
					width: 48rpx;
				}
			}

			.QRCodeBox {
				width: 100%;
				height: 500rpx;
				margin: 92rpx 0 100rpx 0;
				box-sizing: border-box;
				display: flex;
				justify-content: center;

				.QRCode {
					width: 500rpx;
					height: 100%;
					box-sizing: border-box;
					background: #FFFFFF;
					box-shadow: 0 0 16rpx 0rpx rgba(79, 147, 255, 0.4);
					border-radius: 52rpx;
					padding: 38rpx;

					.QRimg {
						width: 100%;
						height: 100%;
					}
				}
			}

			.messBox {
				font-size: 34rpx;
				padding-left: 60rpx;

				.visitTitle {
					font-weight: 600;
					color: #333333;
					padding-bottom: 50rpx;
				}

				.visitItem {
					display: flex;
					font-size: 28rpx;
					padding: 10rpx 0;

					.title {
						width: 152rpx;
						font-weight: 400;
						color: #333333;
					}

					.content {
						font-weight: 400;
						color: #999999;
					}
				}
			}
		}
	}
</style>