【RuoYi移动端】uni-app中实现生成二维码功能（代码示例）

完整示例：

<template>
	<view>
		<view class="titleBar">
			执法检查“通行码”信息
		</view>
 
		<view class="twoCode">
			<canvas canvas-id="qrcode"></canvas>
		</view>
	</view>
</template>
 
<script>
	import UQrcode from '@/pages/common/uqrcode.js'
 
	export default {
		onLoad() {
			this.QRurl = 'https://mp.csdn.net'
			this.qrFun(this.QRurl)
		},
		data() {
 
			return {
				qrcodeData: '', // 存储二维码图片的 Base64 编码
				QRurl: '',
				qrWidth: 0
			}
		},
		created() {
			// this.getCode()
		},
		mounted() {
			// this.generateQRCode('https://www.example.com'); // 生成二维码
		},
		methods: {
 
			qrFun: function(text) {
				UQrcode.make({
					canvasId: 'qrcode', //切记canvasId 里边的内容需要跟canvas里边canvas-id="qrcode"的名字一样
					componentInstance: this, // 当前页面的this,需要传递过去
					text: text, //需要转成二维码的内容是后端传过来的，我这里是onLoad传过来的，根                              据自己的需要
					size: 200, // // 二维码的大小,单位是px
					margin: 0, // 二维码的边距,如果设置为0就无边距
					backgroundColor: '#ffffff', // 二维码的背景色
					foregroundColor: '#000000', // 二维码的前景色,即二维码图案的颜色
					fileType: 'jpg', // 生成的二维码图片格式
					errorCorrectLevel: UQrcode.errorCorrectLevel.H, // 二维码的错误纠正级别,H为最高级别
					// 成功生成二维码的回调函数
					success: res => {
						// 在这里可以获取生成的二维码图片
 
					}
				})
 
 
			}
		},
	}
</script>
 
<style lang="scss">
	page {
		background-color: #eaf0f6;
		padding-top: 20px;
	}
 
	.titleBar {
		width: 90%;
		height: 50px;
		line-height: 50px;
		margin-top: 50px;
		background-image: url("../static/images/gra-linear.png");
		background-size: 100% 50px;
		margin: 0 auto;
		border: 1px solid #C1D6E6;
		text-align: center;
		font-size: 25px;
	}
 
	.twoCode {
		width: 90%;
		height: 300px;
		// line-height: 50px;
		border: 1px solid #C1D6E6;
		margin: 0 auto;
		display: flex;
		align-items: center;
		/* 画布上下居中 */
		justify-content: center;
		/* 画布左右居中 */
		background-color: #fff;
	}
 
 
	/* 画布样式 */
	.twoCode canvas {
		width: 200px;
		height: 200px;
		// background-color: red;
	}
 
 
 
	.topBar {
		height: 50px;
		width: 100%;
		background-image: url("../static/images/header-bg.png");
		background-repeat: repeat-x;
		display: flex;
		align-items: center;
		/* 上下居中 */
		justify-content: center;
		/* 左右居中 */
	}
 
	.topBar img {
		margin-top: 5px;
		height: 40px;
		width: auto;
	}
 
</style>

记得在@/pages/common/uqrcode.js文件夹下放入uqrode.js文件，请到网上下载。