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

技术需要沉淀gogo

于 2024-07-31 14:54:17 发布

阅读量273

点赞数 8

文章标签： uni-app 微信小程序 notepad++ 前端小程序 vue.js

本文链接：https://blog.csdn.net/apple_70049717/article/details/140822061

版权

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 15@2x.png',
					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 15@2x.png',
					foregroundImageWidth: 91 / 3,
					foregroundImageHeight: 91 / 3
				}
			}
		},