在开发 Uniapp 小程序的时候，很多场景都需要用到二维码，比如引导用户添加客服微信、推广活动等。为了提升用户体验，让用户可以方便地识别和保存二维码，我们可以实现长按识别二维码以及保存二维码到相册的功能。下面我就来详细讲讲怎么实现这两个功能。
一、二维码展示部分
<view class="qr-image-box">
<!-- 这里展示二维码图片 -->
<image mode="widthFix" :show-menu-by-longpress="true" class="qr-image"
:src="`${baseUrl}${codeImg}`"></image>
<view class="qr-text-bom">长按识别二维码</view>
</view>
在这段代码里，<view class="qr-image-box">用来包裹二维码图片。<image> 标签就是用来显示二维码的，mode="widthFix" 能让图片宽度自适应，show-menu-by-longpress="true" 这个属性很关键，它开启了长按图片弹出菜单的功能，用户长按二维码时就能选择识别二维码了。src 属性里的 baseUrl 和 codeImg 是动态获取的，这样就能根据实际情况展示不同的二维码。下面的 <view> 标签里的文字是给用户的提示，告诉他们可以长按识别二维码添加客服微信。
二、 保存二维码
1. 保存按钮展示部分
<view class="save-btn padsiz">
<view class="next-textTwo text" @click="goSave">
保存到相册
</view>
</view>
这里有一个按钮，当用户点击这个按钮时，就会触发 goSave 方法，从而把二维码保存到相册里。
2. 保存二维码到相册功能实现
// 保存到相册
goSave() {
// imageUrl是你要保存的图片地址
const imageUrl = this.$baseUrl + this.codeImg;
// 向用户请求保存图片到相册的权限
uni.authorize({
scope: 'scope.writePhotosAlbum',
success() {
// 用户已授权，可以下载并保存图片
uni.downloadFile({
url: imageUrl,
success: (downloadRes) => {
if (downloadRes.statusCode === 200) {
// 下载成功，保存图片到相册
uni.saveImageToPhotosAlbum({
filePath: downloadRes.tempFilePath,
success(res) {
// 图片保存成功，弹出提示框
uni.showToast({
title: '保存成功',
icon: 'success'
});
},
fail(err) {
console.error('图片保存失败', err);
// 图片保存失败，弹出提示框
uni.showToast({
title: '保存失败',
icon: 'none'
});
}
});
} else {
console.error('下载失败', downloadRes);
// 下载失败，弹出提示框
uni.showToast({
title: '下载失败',
icon: 'none'
});
}
},
fail(err) {
console.error('下载失败', err);
// 下载失败，弹出提示框
uni.showToast({
title: '下载失败',
icon: 'none'
});
}
});
},
fail() {
console.log('用户未授权');
// 用户未授权，弹出提示框
uni.showToast({
title: '需要授权才能保存图片',
icon: 'none'
});
}
});
}
在 goSave 方法里，首先会把二维码图片的完整 URL 拼接出来。然后调用uni.authorize方法向用户请求保存图片到相册的权限。如果用户授权了，就调用 uni.downloadFile 方法下载图片。下载成功后，再调用 uni.saveImageToPhotosAlbum 方法把图片保存到相册里。如果整个过程中出现了问题，比如下载失败或者保存失败，都会弹出相应的提示框告诉用户。要是用户没有授权，也会弹出提示框提醒用户需要授权才能保存图片。
三、总结
通过上面这些步骤，我们就轻松实现了 Uniapp 小程序中长按识别二维码和保存二维码到相册的功能。这样用户在使用小程序时，就能很方便地识别和保存二维码，提升了用户体验。
希望这篇文章能帮助到正在开发 Uniapp 小程序的小伙伴们，如果你觉得有用，别忘了点赞关注哦！