uniapp+h5+vu3setup写法使用uvQrcode生成二维码、保存二维码

保存二维码图片时尝试用了uni.saveImageToPhotosAlbum怎么都不好使，方法不执行，没反应，创建a标签的也不适合用在微信浏览器，最终决定使用uvQrcode来实现需求

实现步骤：
1、uniapp插件市场找到uvQrcode插件，地址：https://ext.dcloud.net.cn/plugin?id=12479

2、项目中引入

import uvQrcode from '@/uni_modules/uv-qrcode/components/uv-qrcode/uv-qrcode.vue';

3、使用

//h5SaveTip 设置保存二维码时是否提示 true 或 false 
//h5SaveIsDownload 是否自动下载，默认false出现弹框二次确认
<uv-qrcode ref="qrcode" canvas-id="qrcode" :h5SaveTip="false" :h5SaveIsDownload="true" :value="state.qrcodeValue" size="300rpx" :options="state.options"></uv-qrcode>
<view class="saveBtn" @click="exportQRcode">保存二维码</view>

4、定义数据

<script setup>
	import {ref,reactive} from 'vue'
	import {
		onLoad,
		onReachBottom
	} from '@dcloudio/uni-app';
	const qrcode = ref(null)
	const state = reactive({
		qrcodeValue: 'https://www.baidu.com/',
		options: {
			useDynamicSize: false,
			errorCorrectLevel: 'Q',
			margin: 10,
			areaColor: "#fff",
			// 指定二维码前景，一般可在中间放logo
			//foregroundImageSrc:require('static/image/logo.png')
		},
	})
	onMounted(() => {
		if (qrcode.value) { //不判断的话会报错Cannot read properties of null (reading 'remake')
			qrcode.value.remake({
				success: () => {
					console.log('生成成功');
				},
				fail: err => {
					console.log(err)
				}
			});
		}
	})
function exportQRcode() {
		qrcode.value.toTempFilePath({
			success: res => {
				qrcode.value.save({
					success: () => {
						uni.showToast({
							title: '保存成功！',
							icon: 'success'
						});
					},
					fail: err => {
						uni.showToast({
							title: '保存失败！',
							icon: 'error'
						});
					}
				})
			}
		});
	}
</script>

最终实现效果：

就酱紫就实现啦！！！！