微信小程序-图片授权保存本地【每天一个上分小技巧】

￡神魔★判官ぃ 2023-07-21 11:04 23阅读 0赞

##                                《随手先点赞系列》之每天一个上分小技巧 ##

> 人傻话不多，直接上成品，看完记得给宝宝随个赞哦！

![20200403143932609.gif][]

好了，又到了宁们最喜欢的代码环节，我将毫无保留的给宁们呈上！

先定义好一个保存触发按钮；codes为图片url

接着就是实现postSave方法了；

// 保存图片
      postSave(e) {
        wx.showLoading({
          title: '保存中...'
        })
        wx.downloadFile({
          url: e.currentTarget.dataset.src,
          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()
              }
            })
          }
        })
      },

--------------------

参考文章：[https://www.jianshu.com/p/6ba26ea8e53f][https_www.jianshu.com_p_6ba26ea8e53f]

推荐阅读：[每天一篇上分小技巧-微信小程序前端你所不知道的“秘密”][-]

### 往期回顾： ###

【1】[究竟使用何种手段能使弹框始终水平垂直居中？][Link 1]

【2】[ios拖动或者下拉会出现留白现象？你知道什么原因吗？][ios]

【3】[微信小程序是如何发ajax 与后端进行交互的？][ajax]

--------------------

> ❤如果文章对您有所帮助，就在文章的右上角或者文章的末尾点个赞吧！(づ￣ 3￣)づ
> 
> ❤如果喜欢大白兔分享的文章，就给大白兔点个关注吧！(๑′ᴗ‵๑)づ╭❤～
> 
> ❤对文章有任何问题欢迎小伙伴们下方留言或者入群探讨【群号：708072830】
> 
> ❤鉴于个人经验有限，所有观点及技术研点，如有异议，请直接回复讨论（请勿发表攻击言论）。

[20200403143932609.gif]: /images/20230528/1883a547c5024ee7903ff49234143d4a.png
[https_www.jianshu.com_p_6ba26ea8e53f]: https://www.jianshu.com/p/6ba26ea8e53f
[-]: https://blog.csdn.net/weixin_43970743/article/details/105287674
[Link 1]: https://blog.csdn.net/weixin_43970743/article/details/104917333
[ios]: https://blog.csdn.net/weixin_43970743/article/details/104920815
[ajax]: https://blog.csdn.net/weixin_43970743/article/details/104847146