微信小程序-圖片授權保存本地【每天一個上分小技巧】

                               《隨手先點贊系列》之每天一個上分小技巧

人傻話不多，直接上成品，看完記得給寶寶隨個贊哦！

好了，又到了寧們最喜歡的代碼環節，我將毫無保留的給寧們呈上！

先定義好一個保存觸發按鈕；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】

❤鑑於個人經驗有限，所有觀點及技術研點，如有異議，請直接回復討論（請勿發表攻擊言論）。