jiangximiniprogramSchool/pages/userCenter/scanCode/scanCode.vue

<template>
	<view class="pageBgImg">
		<topNavbar title="个人二维码"></topNavbar>
		<view class="pad">
			<view class="card">
				<view class="qcode">
					<canvas id="qrcode" canvas-id="qrcode" style="width: 200px;height: 200px;"></canvas>
				</view>
			</view>
			
			<view class="card">
				<user-info/>
			</view>
		</view>
	</view>
</template>

<script>
	import UQRCode from 'uqrcodejs';
	export default {
		onReady() {
		  // 获取uQRCode实例
		  var qr = new UQRCode();
		  let {coachId, nickname, schoolId, tenantId} =  this.vuex_userInfo.user
		  // 设置二维码内容
		  qr.data = JSON.stringify({
			  coachId,
			  schoolId,
			  nickname: encodeURIComponent(nickname),
			  schoolName: encodeURIComponent('必须与canvas设置的宽高一致/设置二维码大小')
		  })
		
		  // 设置二维码大小，必须与canvas设置的宽高一致
		  qr.size = 200;
		  qr.margin = 10;
		  qr.errorCorrectLevel = UQRCode.errorCorrectLevel.L
		  // 调用制作二维码方法
		  qr.make()
		  qr.foregroundImageSrc = require('./coach.png')
		  // 获取canvas上下文
		  var canvasContext = uni.createCanvasContext('qrcode', this); // 如果是组件，this必须传入
		  // 设置uQRCode实例的canvas上下文
		  qr.canvasContext = canvasContext;
		  // 调用绘制方法将二维码图案绘制到canvas上
		  qr.drawCanvas();
		}
	}
</script>

<style lang="scss" scoped>
	.qcode {
		width: 100%;
		height: 600rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.card {
		padding: 28rpx;
		margin-bottom: 24rpx;
	}
</style>