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

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

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

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

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

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

<view class="bottom2" bindtap="postSave" data-src="{
   {codes}}">
      <view class="imgright">
           <image src="../../image/download.png"></image>
      </view>
      <view class="download">
           <button class="buttonSize">保存本地</button>
      </view>
</view>

接着就是实现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

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

往期回顾：

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

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

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

❤如果文章对您有所帮助，就在文章的右上角或者文章的末尾点个赞吧！(づ￣ 3￣)づ

❤如果喜欢大白兔分享的文章，就给大白兔点个关注吧！(๑′ᴗ‵๑)づ╭❤～

❤对文章有任何问题欢迎小伙伴们下方留言或者入群探讨【群号：708072830】

❤鉴于个人经验有限，所有观点及技术研点，如有异议，请直接回复讨论（请勿发表攻击言论）。