uniapp__微信小程序实现二维码的生成

uniapp__微信小程序实现生成二维码

项目实战中比较常见，方便下次使用

文章目录

              一、插件地址？使用插件?
              二、生成二维码？
              三、定制封装二维码？
              三、定制封装二维码？

一、插件地址？使用插件?

插件地址点击我即可

点击下载插件导入hbuilderx即可下载此插件

二、生成二维码？

使用（写以下代码即可生成基础二维码）

	<uqrcode ref="code" class="electroniccardImage" canvas-id="code" :value="下班" :size="200">
					</uqrcode>

value就是二维码的内容，size就是尺寸

三、定制二维码以及封装？

就是二维码中间有图片或者是背景色都可以定制

封装的子组件

<uqrcode ref="code" class="electroniccardImage" canvas-id="code" :value="qrText" :size="qrSize"
				:options="qrOptions"></uqrcode>
				<script>
	export default {
		props: {
			cardRegion: {
				type: String,
				default: '广东省电子健康卡'
			},
			componentId: {
			      type: Number,
			      required: true
			    },
			cardName: {
				type: String,
				default: ''
			},
			cardId: {
				type: String,
				default: ''
			},
			qrText: {
				type: String,
				default: ''
			},
			cardAuthority: {
				type: String,
				default: '中华人民共和国国家卫生健康委员会监制'
			},
			qrSize: {
				type: Number,
				default: 91
			},
			choose:{
				type: String,
				default: ''
			},
			qrOptions: {
				type: Object,
				default: () => ({
					foregroundImageSrc: '/static/index/Group [email protected]',
					foregroundImageWidth: 91 / 3,
					foregroundImageHeight: 91 / 3
				})
			}
		}
	}
</script>

父组件

//父组件
<pationsCard :cardName="cardName" :cardId="cardId" :qrText="qrText" :qrSize="qrSize"
					:qrOptions="qrOptions" :cardAuthority="cardAuthority" :cardRegion="cardRegion" :componentId="1">
				</pationsCard>
				data() {
			return {
				qrText: "下班",
				qrSize: 91,
				qrOptions: {
					foregroundImageSrc: '/static/index/Group [email protected]',
					foregroundImageWidth: 91 / 3,
					foregroundImageHeight: 91 / 3
				}
			}
		},