1.下载插件https://ext.dcloud.net.cn/plugin?id=1287
在这里插入图片描述

2.uqrcode中文文档https://uqrcode.cn/doc/document/native.html
更多配置项请参考上述文档

3.我的做完是这样的。logo圆角居中
在这里插入图片描述
4.下面附上代码:
HTML:

<uQrcode ref="code" canvas-id="code" :value="text" :size="size"
				 :options="{
				 foregroundImageSrc: '/static/logo-yilian.png',//logo
				 foregroundImageWidth: size / 3,//logo宽
				 foregroundImageHeight: size / 3,//logo高
				 foregroundImageBorderRadius:35,//logo圆角
				 backgroundImageSrc :'/static/mycenter/main_back.png',//背景图片
				 margin:15,//二维码外边距
				 backgroundPadding:10,//二维码内边距
				 areaColor: 'rgba(25, 147, 227, 0.5)',//二维码绘制区域颜色、底部背景色
				 foregroundColor: 'rgba(25, 147, 227, 0.5)',//二维码前景色
			    }" 
				@click="remake" @complete="complete($event)">
				</uQrcode>
<u-button class="gojoin" @click="save('code')">保存到手机</u-button>

JS:

//引入uQrcode 组件。 
import uQrcode from '@/uni_modules/Sansnn-uQRCode/components/u-qrcode/u-qrcode.vue';
export default {
		data() {
			return {
				text: 'uQRCode',//二维码的值
				size: 180//二维码尺寸
			}
		},
		components: {
			uQrcode
		},
		methods: {
			complete(e) {
				if (e.success) {
					console.log('生成成功');
				} else {
					console.log('生成失败');
				}
			},
			//刷新二维码
			remake() {
				const ref = this.$refs['code'];
				ref.remake();
			},
			//保存到手机
			save() {
				uni.showLoading({
					title: '保存中',
					mask: true
				});
				const ref = this.$refs['code'];
				ref.save({
					success: res => {
						uni.hideLoading();
						uni.showToast({
							icon: 'success',
							title: '保存成功'
						});
					},
					fail: err => {
						uni.showToast({
							icon: 'none',
							title: JSON.stringify(err)
						});
					}
				});
			}
		},
	}
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐