uni-app生成二维码（Qrcode）

Right atrium

已于 2023-01-12 12:19:01 修改

阅读量1k

点赞数

分类专栏： uni-app 文章标签： uni-app javascript 前端

于 2023-01-11 15:59:09 首次发布

本文链接：https://blog.csdn.net/Kino_Hs/article/details/128642245

版权

uni-app 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<template>
	<view class="order-detail">
		<view class="img-box">
			<canvas v-if="isShowCode" canvas-id="qrcode" style="width: 160px;height: 160px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);"/>
		</view>
	</view>
</template>

<script>
	const app = getApp()
	import uQRCode from '@/static/js/uqrcode.js'
	export default {
		components: {
			
		},
		data() {
			return {

			}
		},
		onLoad(options) {
			this.generateCodeFn()
		},
		onShow() {
			
		},
		methods: {
			generateCodeFn(id){
				uQRCode.make({
					canvasId: 'qrcode',
					componentInstance: this,
					text: id,
					size: 160,
					margin: 0,
					backgroundColor: '#ffffff',
					foregroundColor: '#000000',
					fileType: 'jpg',
					errorCorrectLevel: uQRCode.errorCorrectLevel.H,
					success: res => {}
				})
			},
		},
	}
	
</script>

<style lang="scss" scoped>
	.order-detail {
		.img-box {
			width: 190px;
			height: 190px;
			border-radius: 20rpx;
			background-color: #ffffff;
			margin: 300rpx auto 70rpx;
			box-shadow: 0px 3rpx 6rpx rgba(0, 0, 0, 0.16);
			position: relative;
		}
	}
</style>