[JavaScript知识库]小程序——uniapp实现二维码图片弹窗、保存图片功能

小程序uniapp需要实现一个点击某个按钮后，弹出二维码图片，并且有保存图片的功能。

代码实现：
html部分：
使用uniapp中的unipopup组件进行弹窗

<uni-popup ref="kefu" type="center" :mask-click="false" class="kefu">
	<view class="popup">
		<view class="icon-close">
			<uni-icons type="close" size="30" @click="close" color="#fff">
			</uni-icons>
		</view>
		<image src="../../static/images/showModal/qrcode.png" mode="widthFix" 
		class="QRcode"></image>
		<button type="warn" size="default" class="btn-savecode" 
		@click="saveQRcode">保存图片</button>
	</view>
</uni-popup>

css部分：

注意事项：
由于uniapp的unipoup组件有隐藏的白色背景，以及当字体图标需要出现在图片右上角时，所以需要修改组件类css中的background-color为透明，overfloew-y防止图标远离图片后会被隐藏

/deep/.uni-popup__wrapper.uni-custom.center  .uni-popup__wrapper-box{
	background-color: transparent;
	position: relative;
	max-width: 80%;
	max-height: 80%;
	overflow-y: visible;
	.popup{
		width: 100%;
		.icon-close{
			display: block;
			text-align: right;
			margin-right: -60rpx;
		}
		.QRcode{
			width: 450rpx;
			display: block;
		}
		.btn-savecode{
			margin: 20rpx 100rpx;
			border-radius: 50rpx;
			font-size: 30rpx;
		}
	}
}

JS部分：
Uniapp在使用uni.authorize进行授权时，如果用户第一次点击拒绝，再次想进行授权时，发现授权页面无法弹出，而会直接授权失败，非常影响用户体验。这时需要弹出提醒，让用户手动设置授权。

saveQRcode(){
	uni.getSetting({
		success:(res)=>{
			if(res.authSetting['scope.writePhotosAlbum']){ //验证用户是否授权可以访问相册
				this.saveQRcodeToPhotosAlbum();
			}else{
				uni.authorize({
					scope:'scope.writePhotosAlbum',
					success:(res)=>{
						console.log('有授权的信息：',res);
						this.saveQRcodeToPhotosAlbum();
					},
					fail:(err)=>{ //取消授权后再获取授权，需手动设置
						uni.showModal({
							content:'检测到你没打开保存相册权限，是否去设置打开',
							confirmText:'确认',
							cancelText:'取消',
							success(res){
								if(res.confirm){
									uni.openSetting({
										success(res) {
											console.log('授权成功');
										}
									})
								}else{
									console.log('取消授权');
								}
							}
						})
					}
				})
			}
		}
	})
},
saveQRcodeToPhotosAlbum(){
	let that = this
			uni.saveImageToPhotosAlbum({
				filePath:'static/images/showModal/qrcode.png',
				success(res) {
					uni.showToast({
						title:'保存成功',
						icon:'success'
					})
					that.close()
				},
				fail(err){
					console.log(err);
				}
			})
		}