uniapp 生成二维码

先上效果图:

记录一下实现流程：

1、采用uniapp插件市场的 插件ID：ay-qrcode

使用的插件：ext.dcloud.net.cn/plugin?id=3…

感想：刚开始觉得狠nice，如得神器，十分感念uniapp社区的强大和插件作者的牛逼，然而好景不长，问题立马就找上来了，无法居中，试了N种办法都没办法实现，可能还是我技术太菜了吧

2、自制简易款

<template>
	<view class="content">
		<view class="ecard">
			<canvas class="canvas" :canvas-id="qrcode_id"></canvas>
		</view>
	</view>
</template>

<script>
	var qr_we = require("./qrcode_wx.js");

	export default {
		data() {
			return {
				qrcode_id: 'qrcode_id',
			};
		},
		onLoad() {
			this.showQrcode();
		},
		methods: {
			showQrcode() {
				let _this = this;
				setTimeout(function() {
					// uniapp内置 rpx 转 px ==> var px = uni.upx2px(100);
					var h = uni.upx2px(400)
					var w = uni.upx2px(400)
					var url = "99161934409721220200004fb409e4edc1474fafb67779173129df"
					var qrcode_id = 'qrcode_id'
					_this.createQrCode(url, qrcode_id, h, w, );

				}, 100);
			},
			// 调用插件中的draw方法，绘制二维码图片
			createQrCode: function(url, canvasId, cavW, cavH) {
				qr_we.api.draw(url, canvasId, cavW, cavH, this, this.canvasToTempImage);
			},
			//获取临时缓存照片路径，存入data中
			canvasToTempImage: function() {
				var _this = this;
			},
		},
		
	};
</script>

<style scoped>
	.content {
		display: -webkit-flex;
		display: flex;
		flex: 1;
		flex-direction: column;
		align-content: center;
		flex-wrap: wrap;
		background-color: #efeff4;
	}

	.ecard {
		display: -webkit-flex;
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		justify-content: center;
		align-content: center;
		background-color: #ffffff;
		margin: 60rpx 40rpx 40rpx 40rpx;
		width: 670rpx;
		height: 500rpx;
		border-radius: 25px;
	}

	.canvas {
		width: 400rpx;
		height: 400rpx;
		border: 1px solid red;
	}
</style>

最后附上Demo,百度网盘下载即可导入uniapp使用

链接：pan.baidu.com/s/19o2HdC37… 提取码：gpwq