微信小程序点击保存图片到本地相册——踩坑

在微信小程序中要保存图片到本地相册，需要获取相册权限。总之整个功能实现下来需要如下几个小程序的API：wx.getSetting，wx.authorize，wx.openSetting，wx.downloadFile，wx.saveImageToPhotosAlbum

但是在openSetting 和 downloadFile 会有坑！

---

openSetting,【打开小程序设置页】有坑，是官方的问题，这里出现授权弹框，如果你点击拒绝再次引导授权流程弹框不会立马弹出（官方解释说因为频繁代用授权会带来各种一系列问题），如果想马上再次弹出授权弹框需要通过button来解决。
点击查看官方解释

//再次打开授权引导

方法1：使用 button 组件来使用此功能，示例代码如下：
<button open-type="openSetting" bindopensetting="callback">打开设置页</button>

方法2:由点击行为触发wx.openSetting接口的调用，示例代码如下：
<button bindtap="openSetting">打开设置页</button>  openSetting() {  wx.openSetting()}

---

wx.downloadFile 保存图片的时候，打印成功回调里边会有tempFilePath 后缀名不正确格式。（Android机会有这种情况，iOS不清楚），就回导致后续wx.saveImageToPhotosAlbum方法是出现错误：文件格式类型错误问题

解决方法：
重点：

有的说dowloadFile的url值要是jpg格式的，但是我试png也可以，具体情况具体分析。

var fileN=new Date().valueOf();
//filePath指定文件下载后存储的路径，wx.env.USER_DATA_PATH
var fileP=wx.env.USER_DATA_PATH+'/'+fileN+'.jpg'
wx.dowloadFile({
	url:'你的图片url地址',
	filePath:fileP,//这里要加这个filePath属性
	success:(res)=>{
		var filePath=res.filePath;
		wx.saveImageToPhotosAlbum({
			filePath,
			success:(res)=>{
				console.log('保存成功')
			}
		})
	}
	
})

---

完整代码

<image src="{{url}}"></image>
 <view bindtap="clickSaveImg" class="save-code"></view>

---

Page({
	data:{
		url:'',//图片地址
	},
	clickSaveImg(){//先授权相册
		wx.getSetting({
			success:res=>{
				if(!res.authSetting['scope.writePhotosAlbum']){//未授权的话发起授权
					wx.authorize({
						scope:'scope.writePhotosAlbum',
						success:()=>{//用户允许授权，保存到相册
							this.saveImg();
						},
						fail:()=>{//用户拒绝授权，然后就引导授权（这里的话如果用户拒绝，不会立马弹出引导授权界面，坑就是上边所说的官网原因）
							wx.openSetting({
								success:()=>{
									wx.authorize({
										scope:'scope.writePhotosAlbum',
										succes:()=>{//授权成功，保存图片
										this.saveImg();
											
										}
									})
								}
							})
						}
					})
				}else{//已经授权
					this.saveImg();
				}
			}
		})
	},
	
	saveImg(){//保存到相册
		let {url} = this.data;
		wx.downloadFile({//这里如果有报错就按照上边的解决方案来处理
			url:url,
			success:(res)=>{
				wx.saveImageToPhotosAlbum({
					filePath:res.tempFilePath,
					success:(res)=>{
						wx.showToast({
							title:'保存成功！'
						})
					},
					faile:(err)=>{
						console.log('失败！')
					}
				})
			}
		})
	},

})

---

到了这里可以打开调试和在开发者工具都测试一下试试可不可以保存。

最后一个坑

在开发者工具和手机打开调试都可以成功保存图片，但是关了调试，就不可以保存。这个时候需要登录到微信小程序后台(开发->开发设置)，查看downloadFile合法域名 中有没有配置合法域名，也就是下载图片路径的白名单，你的图片路径域名需要在这里配置，才可以！然后就可以保存图片！！！