小程序-保存图片到相册

在做小程序项目的时候，有需求要做一个开票功能，开票之后自然就需要查看发票，在让后台做成图片返回之后，我想了一下，查看发票除了需要看发票图片，提供预览图片可以放大缩小看外，最好应该还要有一个保存图片的功能吧。
刚好微信小程序提供了预览和保存相册两个API，就正好用上。因为预览比较简单，我就只是把保存相册的开发流程写下来，供大家也供自己往后参考了，有什么问题大家可以直接指正。

步骤一：编写HTML布局结构：

<button class="default-btn" hover-class="default-btn-active" bindtap="saveInvoice">保存</button>

布局里一个按钮，是调起保存相册API的，也就保存功能的按钮。

步骤二：编写调用保存相册API的逻辑代码：

  /*下载发票图片*/
  saveInvoice: function () {
    var self = this,
    timestamp = new Date().getTime(),
    file = wx.getFileSystemManager();
    file.writeFile({
      filePath: `${wx.env.USER_DATA_PATH}/invoice_${timestamp}.jpeg`,
      data: self.data.invoiceImg,
      encoding: 'base64',
      success: res => {
        self.saveToAlbum(timestamp);
      },
      fail: err => {
        showMsg('保存失败');
      }
    });
  },
  /*保存发票图片到用户相册，调用小程序API*/
  saveToAlbum: function (timestamp) {
    var self = this;
    wx.saveImageToPhotosAlbum({
      filePath: `${wx.env.USER_DATA_PATH}/invoice_${timestamp}.jpeg`,
      success: res => {
        showMsg('图片已保存至相册');
      },
      fail: err => {
        console.log(err);
      }
    });
  },

因为保存相册API中的filePath参数是需要图片文件路径的，而我拿到的是图片的base64数据，所以需要结合writeFile()的API先把图片文件写入设置的用户路径，再用路径去调用保存相册API来完成保存操作。

是不是大家觉得这样写完就完事啦？当初我也以为是这样的，写完之后我自测了一下，一点按钮就会弹出“允许保存相册”的授权框，允许后图片就保存下来啦，爽歪歪~~

但是，在我再次自测的时候，点了按钮发现没有任何反应，然后通过fail的监听失败事件发现原来是因为我之前授权的时候选择了拒绝，然后点保存按钮，它就再也没询问我授权而是直接获取了之前拒绝的授权记录跳到失败去了。

好吧，掉进一个坑里，只能撸起袖子填了。既然拒绝授权被记录了，那有没有办法在每次点保存的时候查一下授权，如果未允许的就主动调起授权弹窗，这样就能保证未授权的会再次弹出授权弹窗，已授权的就正常调用API。

方法一：

使用wx.getSetting获取用户当前的授权状态，如果是未授权的，就使用 wx.authorize 向用户发起授权请求，这样是不是就能达到目的了。
很遗憾，经过实践之后发现在拒绝授权后使用这个方法，依然是不可行的，没有再重新调起授权弹窗了。（既然不成功，代码就不展示了）

再次经过百度，发现可以通过调用 wx.openSetting 打开设置界面，引导用户开启授权，这样拒绝的授权就可以调整过来啦。

方法二：

先附上代码：

<button hidden='{{!openSettingBtnHidden}}' class="default-btn" hover-class="default-btn-active" bindtap="saveInvoice">保存</button>
<button hidden='{{openSettingBtnHidden}}' class="default-btn" hover-class="default-btn-active" open-type="openSetting" bindopensetting='handleSetting'>去授权</button>

  /*下载发票图片*/
  saveInvoice: function () {
    var self = this,
    timestamp = new Date().getTime(),
    file = wx.getFileSystemManager();
    file.writeFile({
      filePath: `${wx.env.USER_DATA_PATH}/invoice_${timestamp}.jpeg`,
      data: self.data.invoiceImg,
      encoding: 'base64',
      success: res => {
        self.saveToAlbum(timestamp);
      },
      fail: err => {
        showMsg('保存失败');
      }
    });
  },
  /*保存发票图片到用户相册，调用小程序API*/
  /*要考虑处理用户拒绝授权之后如何重新调起授权请求的问题*/
  saveToAlbum: function (timestamp) {
    var self = this;
    wx.saveImageToPhotosAlbum({
      filePath: `${wx.env.USER_DATA_PATH}/invoice_${timestamp}.jpeg`,
      success: res => {
        showMsg('图片已保存至相册');
      },
      fail: err => {
        console.log(err);
        if (err.errMsg === 'saveImageToPhotosAlbum:fail auth deny' || err.errMsg === 'saveImageToPhotosAlbum:fail:auth denied') {
          self.setData({
            openSettingBtnHidden: false
          });
          showMsg('已拒绝授权，请点击重新授权');
        } else {
          showMsg('保存失败');
        }
      }
    });
  },

  /*用户手动重新授权*/
  handleSetting: function(e) {
    var self = this;
    if (!e.detail.authSetting['scope.writePhotosAlbum']) {
      wx.showModal({
        title: '提示',
        content: '若不打开授权，则无法将图片保存在相册中！',
        showCancel: false
      });
      self.setData({
        openSettingBtnHidden: true
      })
    } else {
      wx.showModal({
        title: '提示',
        content: '您已授权，赶紧将图片保存在相册中吧！',
        showCancel: false
      })
      self.setData({
        openSettingBtnHidden: true
      })
    }
  }

思路：

首先成功的逻辑还是保留，也就是如果第一次授权用户允许了，基本上逻辑还是一样的；
在调用wx.saveImageToPhotosAlbum()API中fail监听中添加判断逻辑，如果是因拒绝授权而失败的情况，就会提供重新授权的按钮。按钮使用open-type="openSetting"开放能力，点击就能调起打开授权设置界面，用户就可以修改授权。
3.用户手动重新授权之后的处理逻辑，查询用户是否真的允许了某个授权，若是，则提示成功，让用户重新点击保存即可；若否，则提醒用户因其未授权导致无法使用保存功能。