小程序保存图片到相册-微信小程序保存相册权限

一、准备阶段

保存图片到系统相册文档

 uni.saveImageToPhotosAlbum({
	filePath: '', // 必须是本地路径
	success: () => {
		console.log('保存成功');
	},
	fail:() => {
		console.log('保存失败')
	}
});

注意：此处的 filePat 必须是本地图片路径！！！！

疑问1：当用户第一次点击保存按钮调用了该接口，会弹出提示授权弹框，此时若点击了取消按钮，那么当用户第二次再点击保存按钮时此时会直接走fail接口而不会再次弹出授权提示框。那么此时又该如何重新拉起授权呢

疑问2：无论是用户未授权还是授权之后保存时点击了取消小程序保存图片到相册，都会直接走fail回调。那么此时又该如何区分是未授权还是说授权后点击了取消保存的按钮

二、疑问解答 疑问1解答：参考调起客户端小程序设置界面文档

虽然不能直接像用户第一次点击保存按钮时直接弹出授权弹框允许书券，但是可以通过打开设置界面让用户直接进入到设置页面手动打开

uni.openSetting({
	success(res) {
		console.log('用户打开设置页面')
	}
});

可通过预约文档进一步设置判断用户是都打开了之类的小程序保存图片到相册，不过没什么必要

疑问2解答：参考获取用户的当前设置文档

至于如何区分是用户时未授权还是说授权后点击了取消保存的按钮而走的fail回调，可通过判断用户是否授权了保存相册的权限，来进一步完善逻辑

wx.getSetting({
		success(res) {
			if(res.authSetting['scope.writePhotosAlbum']) { // 已授权,用户点击了取消按钮
				console.log('用户点击了取消保存相册')
				uni.showToast({
					icon: 'none',
					title: '取消'
				});
			}
			if(res.authSetting['scope.writePhotosAlbum'] == false) { // 用户未授权
				console.log('用户未授权保存相册')
			}
		}
	})

三、将以上逻辑整合起来

当点击保存时，直接调用保存相册接口(第一次的话会直接弹出授权提示框,后续正常走逻辑就对了)，若用户点击了取消或者用户压根就未授权时,先通过判断用户是否打开了保存相册的权限,若用户未授权则提示是否跳转设置页面授权打开,若用户已授权了则用户是点击了取消按钮

 uni.saveImageToPhotosAlbum({
	filePath: '', // 必须是本地路径
	success: () => {
		uni.showToast({
			icon: 'success',
			title: '保存成功',
			duration: 2000
		});
	},
	fail:() => { // 保存失败有可能是用户点击了取消按钮，也有可能是用户未授权保存相册功能这时候需要用户手动开启权限
		// console.log('失败')
		wx.getSetting({
			success(res) {
				if(res.authSetting['scope.writePhotosAlbum']) { // 已授权,用户点击了取消按钮,无需其他操作
					uni.showToast({
						icon: 'none',
						title: '取消'
					});
				}
				if(res.authSetting['scope.writePhotosAlbum'] == false) { // 未授权,需用户跳转设置页面开启权限
					uni.showModal({
						title: '提示',
						content: `图片保存失败，请前往设置页面允许保存相册`,
						confirmColor: '#8C5CDD',
						success: function (res) {
							if (res.confirm) {
								// console.log('用户点击确定');
								uni.openSetting({
								success(res) {
									console.log('用户打开设置页面')
								}
							} else if (res.cancel) {
								// console.log('用户点击取消');
								uni.showToast({
									icon: 'none',
									title: '取消'
								});
							}
						}
					});
				}
			}
		})
	}
});

四、其他：预览图片和视频文档

注意：此接口只支持微信小程序

此接口也可做到保存图片以及分享的效果,预览状态下长按图片即可

wx.previewMedia({
	sources: [{
		url: '', // 必须url网络路径
		type: 'image'
	}],
	success: () => {
		console.log('成功')
	}
})