微信小程序圖片保存到本地

微信小程序圖片保存到本地是一個常用功能：

這里講解下完整實現思路：

　　因為微信官方的授權只彈一次，用戶拒絕后再次調用，就需要結合button組件的微信開放能力來調起，以下方案在微信各種授權中可參考。

　　wxml部分：一個保存圖片按鈕（A），一個button組件(B)用來觸發授權，B透明度為0，蓋在A上，用一個變量來控制是否存在頁面中。

<view class='btn ' bindtap='saveImg'>保存</view>
<button class='openSetting' open-type="openSetting" bindopensetting='handleSetting' hidden='{{openSettingBtnHidden}}'>授權</button>

　　js中：

data:{
  openSettingBtnHidden: true,//是否授權
  imgUrl: '圖片地址'
},

// 保存圖片
  saveImg:function(e){
    let that = this;

    //獲取相冊授權
    wx.getSetting({
      success(res) {
        if (!res.authSetting['scope.writePhotosAlbum']) {
          wx.authorize({
            scope: 'scope.writePhotosAlbum',
            success() {
              //這里是用戶同意授權后的回調
              that.saveImgToLocal();
            },
            fail() {//這里是用戶拒絕授權后的回調
              that.setData({
                openSettingBtnHidden: false
              })
            }
          })
        } else {//用戶已經授權過了
          that.saveImgToLocal();
        }
      }
    })

  },
  saveImgToLocal: function (e) {
    let that = this;
 
    let imgSrc = that.data.imgUrl;
    wx.downloadFile({
      url: imgSrc,
      success: function (res) {
        console.log(res);
        //圖片保存到本地
        wx.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success: function (data) {
            wx.showToast({
              title: '保存成功',
              icon: 'success',
              duration: 2000
            })
          },
        })
      }
    })

  },

  // 授權
  handleSetting: function (e) {
    let that = this;
    // 對用戶的設置進行判斷，如果沒有授權，即使用戶返回到保存頁面，顯示的也是“去授權”按鈕；同意授權之后才顯示保存按鈕

    if (!e.detail.authSetting['scope.writePhotosAlbum']) {
      // wx.showModal({
      //   title: '警告',
      //   content: '若不打開授權，則無法將圖片保存在相冊中！',
      //   showCancel: false
      // })
      that.setData({
        openSettingBtnHidden: false
      })
    } else {
      // wx.showModal({
      //   title: '提示',
      //   content: '您已授權，趕緊將圖片保存在相冊中吧！',
      //   showCancel: false
      // })
      that.setData({
        openSettingBtnHidden: true
      })
    }
  },