项目需求
最近做一个小程序项目的时候遇到了保存图片到手机相册的一个功能。就像这样:
需要通过点击【保存按钮】进行授权保存到本地
官方神坑
因为海报图是后台接口给出的一个url,所以需要使用wx.downloadFile
进行赋值操作,然后使用wx.saveImageToPhotosAlbum
保存本地图片。在执行wx.saveImageToPhotosAlbum
操作的时候需要用户授权操作。
但是很坑的是,用户拒绝授权以后,在开发工具和真机上返回的回调信息是不一样的。。。其实,在不同的真机上,返回信息也是不一样的。。??
fail回调主要返回这两个信息saveImageToPhotosAlbum:fail:auth denied
和saveImageToPhotosAlbum:fail auth deny
。
所以千万不要惊讶,自己的开发工具是好的,跑到真机上就不行了。。??,这个坑,官方也是没有任何回应,表示一切以真机为准。。
因此需要这么解决??
if (err.errMsg === "saveImageToPhotosAlbum:fail:auth denied" || err.errMsg === "saveImageToPhotosAlbum:fail auth deny") {
.......
}
fail回调后的一些操作
ok,解决完以上问题,我们需要给用户进行下一步引导。(用户表示,劳资不小心点了拒绝授权,现在劳资又想要保存图片了,但是找不到入口呀。。。)
那么我们需要使用wx.openSetting
进行用户引导,帮他们打开设置,进行相册授权。(让你皮~??)
那么问题来了,当你在fail
回调中美滋滋的加上wx.openSetting
的时候,发现并不能跳转,,而且我测试的是,在部分机型可以跳转。(机型没记。。?)好气。
打开官网一看一行小字
注意:2.3.0 版本开始,用户发生点击行为后,才可以跳转打开设置页,管理授权信息。
呵呵,又要手动授权了。好吧,我们需要一个按钮触发,那什么按钮比较友好呢?我能想到的就是wx.showModal
。哈哈哈在这个wx.showModal
的success
回调中加上wx.openSetting
效果很棒~
至此,这个坑终踩过去了。
小小的吐槽一下,其实wx.previewImage(Object object)其实也蛮适合做海报分享的。
在新页面中全屏预览图片。预览的过程中用户可以进行保存图片、发送给朋友等操作。
如果觉得授权操作麻烦,可以拿出此武器去怼PM~???
详细代码
最后贴上代码
<button class='btn' bindtap='postSave'>保存到本地相册</button>
// 保存海报
postSave(e) {
wx.showLoading({
title: '保存中...'
})
wx.downloadFile({
url: 'http://xxx.com/poster.png',
success: function (res) {
//图片保存到本地
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: function (data) {
wx.hideLoading()
wx.showModal({
title: '提示',
content: '您的推广海报已存入手机相册,赶快分享给好友吧',
showCancel:false,
})
},
fail: function (err) {
if (err.errMsg === "saveImageToPhotosAlbum:fail:auth denied" || err.errMsg === "saveImageToPhotosAlbum:fail auth deny") {
// 这边微信做过调整,必须要在按钮中触发,因此需要在弹框回调中进行调用
wx.showModal({
title: '提示',
content: '需要您授权保存相册',
showCancel: false,
success:modalSuccess=>{
wx.openSetting({
success(settingdata) {
console.log("settingdata", settingdata)
if (settingdata.authSetting['scope.writePhotosAlbum']) {
wx.showModal({
title: '提示',
content: '获取权限成功,再次点击图片即可保存',
showCancel: false,
})
} else {
wx.showModal({
title: '提示',
content: '获取权限失败,将无法保存到相册哦~',
showCancel: false,
})
}
},
fail(failData) {
console.log("failData",failData)
},
complete(finishData) {
console.log("finishData", finishData)
}
})
}
})
}
},
complete(res) {
wx.hideLoading()
}
})
}
})
}