艺灵设计

全部文章
×

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

作者:艺灵设计 - 来源:http://www.yilingsj.com - 发布时间:2020-04-06 21:09:01 - 阅: - 评:0 - 积分:0

摘要:在昨天的文章《微信小程序入坑教程二十:生成海报前使用wx.downloadFile或wx.getImageInfo时潜在的坑》中提到了用户授权一事,scope.writePhotosAlbum可以检测用户有没有开启保存图片到本地的权限。当项目中使用了wx.saveImageToPhotosAlbum这个API来保存生成的海报时,我们就需要通过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安卓手机使用scope.writePhotosAlbum判断用户是否有保存相册的权限(友情提醒:点击上方图片即可播放视频)

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

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

上面都是在安卓手机上演示的,那苹果用户又会是怎样的呢?视频:苹果手机上保存海报时不会验证权限.mp4苹果手机上保存海报时不会验证权限(友情提醒:点击上方图片即可播放视频)

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

3.1、继续完善代码

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

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

四、demo源码

demo源码已上传到了github上的dev-scope-writePhotosAlbum-20200406 分支中。如果看官需要研究源码,可以点击下面的链接进行访问并下载。

  1. 网址:https://github.com/yilingsj/weixinxiaochengxu/tree/dev-scope-writePhotosAlbum-20200406
转载声明:
  若亲想转载本文到其它平台,请务必保留本文出处!
本文链接:/xwzj/2020-04-06/weixin-scope-writePhotosAlbum.html

若亲不想直保留地址,含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载,随便修改,但请尊重艺灵的劳动成果!谢谢理解。

亲,扫个码支持一下艺灵呗~
如果您觉得本文的内容对您有所帮助,您可以用支付宝打赏下艺灵哦!

Tag: 微信小程序 小程序工具 小程序教程 wx.saveImageToPhotosAlbum wx.downloadFile wx.getImageInfo scop

上一篇: 微信小程序入坑教程二十:生成海报前使用wx.downloadFile或wx.getImageInfo时潜在的坑   下一篇: 微信小程序从入坑到放弃二十二:完美兼容安卓和ios手机的底部评论框

评论区