微信小程序保存图片到相册授权被拒绝后重新拉取授权wx.opensetting的使用方法

近期开发过小程序的童鞋应该已经知道，小程序某些接口已废弃，改用新的接口。比如wx.getUserInfo()、wx.authorize()、wx.openSetting()等都将废弃，拉起不了用户授权界面。而它们被统一集成在button组件里的一个open-type属性里面，也就是说，小程序为了更好的保护用户隐私，大部分涉及到授权的问题，都需要引导用户主动去授权，而不是强制被授权。下面就主要来讲怎么解决保存图片到相册授权被拒绝后重新拉取授权wx.opensetting的问题：

首先我们用图片看下授权（授权界面的拉起用的是初始方式wx.authorize()）被拒绝后会产生一个什么问题：

大致的步骤是这样的（这里考虑的是用户拒绝场景，如果是允许，则走正常逻辑会将图片保存在相册中）：

1.用户第一次点击保存到相册，拉起授权界面；

2.用户点击拒绝后，授权界面会消失；

3.用户再次点击保存到相册，授权界面不会再出现。

出现这个问题的根本原因是这样的：

用户第一次拒绝授权弹框后，短期内微信会认为用户拒绝该授权意愿并且不会再次吊起授权弹框

那么这里我们就很有必须要让用户二次授权，而二次授权就需要用户主动设置勾选同意授权。调用这个“二次授权”设置页之前使用的api是wx.opensetting，即打开设置，但是很遗憾的是，如果再次使用wx.opensetting这个接口，授权界面是不会被拉起的。

那怎么办？解决办法是引导用户主动去设置页面去授权，也就是现在小程序拉起授权的功能都集成在了button组件，所以这里需要用到button组件里的一个open-type属性，属性值为'openSetting'和一个绑定事件bindopensetting联合使用，也就是说在button组件里设置好这两个条件后，在用户点击这个button的时候就会跳转到设置页面去引导引导用户授权（看下图）。

这里最重要的是：在设置页面一定要判断用户授权的状态，如果没授权，那么button则还是显示去授权的状态；如果已授权，则button就显示保存的状态。

下面来看具体的代码实现：

HTML部分：

<canvas canvas-id="shareImg" style="width:100%;height:100%;"></canvas>
<button type='primary' class='saveImg' bindtap='save' hidden='{{saveImgBtnHidden}}'>保存图片</button>
<button type='primary' class='openSetting' open-type="openSetting"
bindopensetting='handleSetting' hidden='{{openSettingBtnHidden}}'>去授权</button>

CSS部分：

page{
  width: 100%;
  height: 100%;
  background: #999;
}

.saveImg,.openSetting{
  position: absolute;
  bottom: 10px;
  width: 90%;
  left: 5%;
  height: 50px;
}

JS部分（其中canvas绘图的js代码可参考我的另一篇博客：https://blog.csdn.net/Charles_Tian/article/details/80910616）：

  /*
   * 保存到相册
  */
  save: function () {
    var that = this;
    //获取相册授权
    wx.getSetting({
      success(res) {
        if (!res.authSetting['scope.writePhotosAlbum']) {
          wx.authorize({
            scope: 'scope.writePhotosAlbum',
            success() {//这里是用户同意授权后的回调
              that.savaImageToPhoto();
            },
            fail() {//这里是用户拒绝授权后的回调
              that.setData({
                saveImgBtnHidden: true,
                openSettingBtnHidden: false
              })
            }
          })
        }else{//用户已经授权过了
          that.savaImageToPhoto();
        }
      }
    })
  },

  handleSetting: function(e){
    let that = this;
    // 对用户的设置进行判断，如果没有授权，即使用户返回到保存页面，显示的也是“去授权”按钮；同意授权之后才显示保存按钮
    if (!e.detail.authSetting['scope.writePhotosAlbum']) {
      wx.showModal({
        title: '警告',
        content: '若不打开授权，则无法将图片保存在相册中！',
        showCancel: false
      })
      that.setData({
        saveImgBtnHidden: true,
        openSettingBtnHidden: false
      })
    }else{
      wx.showModal({
        title: '提示',
        content: '您已授权，赶紧将图片保存在相册中吧！',
        showCancel: false
      })
      that.setData({
        saveImgBtnHidden: false,
        openSettingBtnHidden: true
      })
    }
  },

  savaImageToPhoto: function(){
    let that = this;
    wx.showLoading({
      title: '努力生成中...'
    })
    wx.canvasToTempFilePath({
      x: 0,
      y: 0,
      width: that.data.winWidth,
      height: that.data.winHeight - 70,
      destWidth: that.data.winWidth,
      destHeight: that.data.winHeight - 70,
      canvasId: 'shareImg',
      success: function (res) {
        wx.hideLoading()
        wx.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success(res) {
            wx.showModal({
              content: '图片已保存到相册了',
              showCancel: false,
              confirmText: '朕知道啦',
              confirmColor: '#72B9C3',
              success: function (res) {
                if (res.confirm) {
                  console.log('用户点击确定');
                  that.setData({
                    hidden: true
                  })
                }
              }
            })
          }
        })
      },
      fail: function (res) {
        console.log(res)
      }
    })
  },

微信小程序保存图片到相册授权被拒绝后重新拉取授权wx.opensetting的使用方法

猜你喜欢