微信小程序入坑教程二十一：使用wx.saveImageToPhotosAlbum保存图片时通过检测scope.writePhotosAlbum权限来提醒用户是否需要授权

摘要：
在昨天的文章《微信小程序入坑教程二十：生成海报前使用wx.downloadFile或wx.getImageInfo时潜在的坑》中提到了用户授权一事，scope.writePhotosAlbum可以检测用户有没有开启保存图片到本地的权限。当项目中使用了wx.saveImageToPhotosAlbum这个API来保存生成的海报时，我们就需要通过scope.writePhotosAlbum判断用户有没有授权下载图片的权限。若没有权限，海报图就无法正常保存到相册中…

微信小程序入坑教程二十一：使用wx.saveImageToPhotosAlbum保存图片时通过检测scope.writePhotosAlbum权限来提醒用户是否需要授权

一、为什么要根据scope.writePhotosAlbum的值来判断用户是否有开启了保存图片的权限？

1.1、场景

先描述下场景：
假设小美在浏览商品详情页时，发现这款商品挺不错的，然后想发个朋友圈。于是她点击了“分享”按钮，生成了一张带二维码的海报。如果想要保存这张海报，必须要截屏或点击海报下方的按钮才行。场景描述完了，这个场景看官们不陌生吧！

1.2、代码实现

根据上面的场景及功能，通常有两种方法来实现。

• 方法一：wx.downloadFile + wx.canvasToTempFilePath +
wx.saveImageToPhotosAlbum；
• 方法二：wx.getImageInfo +
wx.canvasToTempFilePath + wx.saveImageToPhotosAlbum

下面简单介绍下各API的功能，详细的可以访问微信官方文档小程序。

• wx.downloadFile：下载文件资源到本地，仅支持https的链接地址。成功的回调函数会返回一个临时的文件地址，即：res.tempFilePath。更多参数见官方文档DownloadTask wx.downloadFile(Object object)；
• wx.getImageInfo：获取图片信息，成功的回调函数中会图片的本地路径，即：res.path。更多参数见官方文档wx.getImageInfo(Object object)；
• wx.canvasToTempFilePath：把当前画布指定区域的内容导出生成指定大小的图片。成功的回调中会返回图片的临时地址，即：res.tempFilePath。更多参数见官方文档wx.canvasToTempFilePath(Object object, Object this；
• wx.saveImageToPhotosAlbum：保存上一步的图片到系统相册，成功时会直接保存图片到相册中。更多参数见官方文档wx.saveImageToPhotosAlbum(Object object)

现在还看不出有什么坑，但在手机上操作时你就会发现wx.saveImageToPhotosAlbum这个API是有坑的！具体有啥坑，上视频。戳我播放 安卓手机不判断用户是否有保存权限时只在第一次有提醒.mp4

1.3、wx.saveImageToPhotosAlbum只弹窗提醒一次

当用户点击上面的保存海报按钮后，若用户是第一次使用，此时会有一个弹窗提醒用户授权。如果用户点击了拒绝，无论再怎么点保存海报的按钮（清空缓存可绕过），都不会有弹窗提醒且会直接进入fail中。这个流氓操作在微信官方的文档中竟然没有明确提醒给开发者，这不坑爹嘛！！！所以，为了让代码更加健壮，必须要调用wx.getSetting这个API，判断res.authSetting的授权结果中是否有scope.writePhotosAlbum。有且值为true则表示同意保存到相册，否则就要再次提醒用户开启权限。 至于如何根据scope.writePhotosAlbum的值进行判断，参见网络文章：微信小程序授权保存到相册功能

二、完善代码

由于代码太长，这里就不一一展示了，放一个最终的视频演示让看官感受下。戳我播放 安卓手机使用scope.writePhotosAlbum判断用户是否有保存相册的权限.mp4

可以看到，当我们加了验证后，若用户第一次拒绝了授权后，再次点击保存海报时会自动跳转到相册权限页面，当用户开启相册后才能成功的保存图片到手机上。

三、苹果手机无需验证授权

上面都是在安卓手机上演示的，那苹果用户又会是怎样的呢？视频：戳我播放 苹果手机上保存海报时不会验证权限.mp4

通过视频可以看到，不管是点击保存海报（不验证权限）这个按钮还是点击下面的保存海报（验证权限）按钮，在苹果手机中都不会像安卓那样有弹窗提示！而且进入相册时会发现图片已经保存成功。

3.1、继续完善代码

目前为止，我们的代码是不是已经写完了呢？理论上是的，但在苹果手机上还需要再做一步处理。什么处理呢？因为苹果手机不需要验证权限，点击保存海报按钮后会先显示一个“保存中…”字样的loading提示，成功了也没有提醒用户保存成功。这一点儿不像安卓手机，底部会自动出现一个提醒。如图：图片保存成功时在安卓机上会有提示苹果机上没有提示.jpg
所以，我们需要在代码中添加一个wx.showToast成功的提醒。相关代码如图：在wx-saveImageToPhotosAlbum的成功回调函数中添加提醒代码.png
最终效果如图：苹果手机中保存海报成功添加一个toast提醒.png

至此，我们的代码已经可以完美的兼容安卓和苹果手机了。不仅如此，示例的源码还实现了wx.downloadFile和wx.getImageInfo两种不同的API保存图片到相册。看官可以根据自身情况，选择任意一种使用到项目中。

四、demo源码

demo源码已上传到了github上，如果看官需要研究源码，可以点击下面的链接进行访问并下载。前往github仓库下载源码

源码中会有必要注释和本篇文章的所有示例。若有疑问可与艺灵联系，方式见下方二维码或右侧。

五、其他说明

原文首发于艺灵设计，转载请注明来源，谢谢。