uniapp + uview-plus 微信小程序二维码生成和保存完整解决方案
📋 项目背景
在开发微信小程序时，经常需要实现二维码的生成和保存功能。本文档提供了一个基于 uniapp + uview-plus 框架的完整解决方案，彻底解决了以下常见问题：
- ✅ Canvas API 兼容性问题
- ✅ 微信小程序权限处理
- ✅ u-qrcode 组件保存方法不可用
- ✅ 组件内部方法依赖问题
- ✅ 时序问题和异步处理
🎯 核心设计思路
采用纯API方案，完全绕过Canvas操作：
- 使用 u-qrcode 组件显示二维码
- 保存时通过第三方API重新生成相同内容的二维码
- 下载生成的图片并保存到相册
🔧 技术栈
- 框架: uniapp
- UI库: uview-plus v3.4.54
- 目标平台: 微信小程序
- Vue版本: Vue 3 + Composition API
💻 完整代码实现
1. QrcodeGenerator.vue 组件
<template><view class="qrcode-generator"><view class="qrcode-container"><u-qrcode ref="qrcodeRef":val="qrcodeText" :size="qrcodeSize":background="backgroundColor":foreground="foregroundColor":loadMake="loadMake"@click="onQrcodeClick"@result="onQrcodeResult"></u-qrcode></view></view>
</template><script setup>
import { ref, computed, watch, onMounted, nextTick } from 'vue'// 定义 props
const props = defineProps({// 二维码内容（必传）text: {type: String,required: true,default: ''},// 二维码尺寸size: {type: Number,default: 200},// 二维码边距margin: {type: Number,default: 0},// 背景颜色backgroundColor: {type: String,default: '#ffffff'},// 前景颜色foregroundColor: {type: String,default: '#000000'},// 容错级别 L/M/Q/HcorrectLevel: {type: String,default: 'M'},// 是否立即生成loadMake: {type: Boolean,default: true}
})// 定义 emits
const emit = defineEmits(['click', 'save', 'generated'])// 响应式数据
const qrcodeRef = ref(null)
const qrcodeResult = ref('') // 保存二维码生成结果
const qrcodeTempFilePath = ref('') // 保存二维码临时文件路径// 计算属性
const qrcodeText = computed(() => props.text || 'https://example.com')
const qrcodeSize = computed(() => props.size)// 监听文本变化，重新生成二维码
watch(() => props.text, (newText, oldText) => {console.log('QrcodeGenerator文本变化:', { oldText, newText })if (newText && newText !== oldText && qrcodeRef.value) {console.log('触发u-qrcode重新生成二维码')// 使用nextTick确保DOM更新后再生成nextTick(() => {if (qrcodeRef.value && qrcodeRef.value._makeCode) {qrcodeRef.value._makeCode()}})}
}, { immediate: true })// 二维码点击事件
const onQrcodeClick = () => {emit('click', {text: qrcodeText.value,size: qrcodeSize.value})
}// 二维码生成完成回调
const onQrcodeResult = (result) => {console.log('二维码生成完成:', result)qrcodeResult.value = result// 保存临时文件路径，这是u-qrcode组件生成的可用于保存的路径qrcodeTempFilePath.value = resultemit('generated', result)
}// 保存二维码方法 - 完全不用Canvas的方案
const downloadQrcode = async () => {console.log('=== 纯API方式保存二维码 ===')try {// 第一步：获取当前二维码内容const qrText = qrcodeText.valueif (!qrText || qrText === 'https://example.com') {throw new Error('二维码内容无效')}console.log('二维码内容:', qrText)// 第二步：检查相册权限await checkAlbumPermission()// 第三步：使用第三方API生成二维码图片const tempFilePath = await generateQrcodeByAPI(qrText)// 第四步：保存到相册await saveToAlbum(tempFilePath)// 第五步：显示成功提示uni.showToast({title: '保存成功',icon: 'success',duration: 2000})} catch (error) {console.error('保存失败:', error)uni.showToast({title: error.message || '保存失败',icon: 'none',duration: 3000})}
}// 检查相册权限
const checkAlbumPermission = () => {return new Promise((resolve, reject) => {// #ifdef MP-WEIXINuni.getSetting({success: (
)
)
