uni-app 生成二维码 简单demo

1.首先引入插件

import uQRCode from "@/components/uqrcode/uqrcode.js"

插件代码下载地址如下：
https://github.com/Sansnn/uQRCode

2. 需要定义的数据

data() {
		return {
			qrcodeText: '',
			qrcodeSize: 100,
			qrcodeSrc: '',
			name:','
		}
	},

3. 方法

methods: {
			make() {
				uni.showLoading({
					title: '生成中...',
					mask: true
				})
				uQRCode.make({
					canvasId: 'qrcode',
					text: this.qrcodeText,
					size: this.qrcodeSize,
					margin: 10,
					success: res => {
						this.qrcodeSrc = res
					},
					complete: () => {
						uni.hideLoading()
					}
				})
			},
}

4. 在onLoad中调用该方法以及传参

onLoad(e) {
			//console.log(e)
			this.qrcodeText=e.id
			this.name=e.wzmc
			this.sblx=e.sblx
			this.sbbm=e.sbbm
			this.make()
},

5.前端代码

<view class="box_tr">
	<view class="canvas tr_left td">
		<canvas canvas-id="qrcode" :style="{width: `${qrcodeSize}px`, height: `${qrcodeSize}px`}" />
	</view>
</view>

6.这是我的最后生成效果如下：

7.css样式代码：

<style>
	page {
		background-color: #f0f0f0;
	}
	
	.gys{
		padding: 20rpx 0rpx 20rpx 0rpx;
	}

	.box_table{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-top: 50rpx;
	}
	.box_tr{
		float: left;
		width: 90%;
		height: 100%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		border: 1px solid #333333;
		margin-top: -1px;
	}
	.td{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 50%;
		height: 100%;
		padding: 15rpx 20rpx 15rpx 20rpx;
		border-right: 1px solid #333333;
		font-size: 30rpx;
		color: #222222;
		margin-right: -1px;
		
	}
	.tr_left{
		float: left;
	}
	.tr_right{
		float: left;
	}
</style>