微信小程序保存图片到相册（先授权，再保存）

小程序保存图片是一个常用功能，这里来记录一下实现的过程。

首先最新的小程序基础库发布之后不再支持不是由button发起的openSetting了，具体可查看（https://developers.weixin.qq.com/community/develop/doc/000cea2305cc5047af5733de751008），所以需要借助button组件的微信开放能力来调起。

在保存图片到相册的时候，是需要授权的，这个时候，需要先检测下是否授权，没有则进行授权验证，通过后则执行保存办法。如果拒绝授权，则要增加一个透明的按钮来打开设置页面，以下为实现功能的核心代码。

wxml文件：

<image src="/images/invite_xuanchuan.png" mode="heightFix" />
<button class="saveModel-btn" bindtap="saveCard">保存到手机相册</button>
<button class="getSet" hidden="{{isGetSet}}" open-type="openSetting"></button>

js文件：

data: {
    isGetSet: true
},
saveImage (filePath) {
    wx.saveImageToPhotosAlbum({
      filePath: "/images/invite_xuanchuan.png",
      success: (res) => {
        console.log(res)
        this.showToast('保存成功')
      },
      fail: (err) => {
        console.log(err)
        this.showToast('保存失败')
      }
    })
},

// 微信提示方法
showToast (title) {
    wx.showToast({
      title: title
    });
},

saveImageToPhotos (filePath) {
    let self = this
    // 相册授权
    wx.getSetting({
      success(res) {
        // 进行授权检测，未授权则进行弹层授权
        console.log(res.authSetting)
        if (!res.authSetting['scope.writePhotosAlbum']) {
          wx.authorize({
            scope: 'scope.writePhotosAlbum',
            success () {
              self.saveImage(filePath)
              self.setData({
                isGetSet: true
              })
            },
            // 拒绝授权时，在下载按钮上面增加打开手机设置按钮
            fail() {
              console.log('拒绝授权')
              self.setData({
                isGetSet: false
              })
            }
          })
        } else {
          // 已授权则直接进行保存图片
          self.setData({
            isGetSet: true
          })
          self.saveImage(filePath)
        }
      },
      fail(res) {
        console.log(res);
      }
    })
},
// 按钮点击触发
saveCard (res) {
    this.saveImageToPhotos(res)
},
onShow: function () {
    var that = this;
    wx.getSetting({
      success(res) {
        //由设置页面回到当前页面，需进行重新授权检测
        if (res.authSetting['scope.writePhotosAlbum']) {
          console.log('已重新授权')
          that.setData({
            isGetSet: true
          })
        }
      }
    })
}