uniapp 生成二维码

时间:2024-12-04 19:03:01

1:下载qrcodejs

2:把下载好的js放入common文件夹中

3:在需要的页面引入js,调用代码:

<template>
	<view class="screen-full  t-center pt-30">
		<view class=" bg-fff t-center border-radius mg-30">
			<canvas id="qrcode" canvas-id="qrcode" class="w-h-120 "></canvas>
		</view>
	</view>
</template>

<script>
	import uqrCode from '@/common/uqrcode.js'
	export default {
		data() {
			return {
				id: 0,
				qrcode: false
			}
		},
		onLoad(e) {
			this.id = e.id;
			this.generateQRCode();

		},
		methods: {
			generateQRCode() {
				const text = "http://www.baidu.com/goout_detail?id=" + this.id;
				uqrCode.make({
					canvasId: 'qrcode',
					componentInstance: this,
					text: text, // 想生成二维码到内容
					size: 120,
					margin: 0,
					backgroundColor: '#ffffff',
					foregroundColor: '#000000',
					fileType: 'jpg',
					errorCorrectLevel: uqrCode.errorCorrectLevel.H,
					success: res => {
						this.imgCode = res // base64的图片格式
					}
				})
			}
        }