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

最新推荐文章于 2023-03-03 11:07:55 发布

97pra

最新推荐文章于 2023-03-03 11:07:55 发布

阅读量8.3k

点赞数 1

分类专栏：小程序相关

本文链接：https://blog.csdn.net/zxc123789tm/article/details/83142864

版权

小程序相关专栏收录该内容

22 篇文章 0 订阅

订阅专栏

近期开发过小程序的童鞋应该已经知道，小程序某些接口已废弃，改用新的接口。

比如wx.getUserInfo()、wx.authorize()、wx.openSetting()等都将废弃，拉起不了用户授权界面。

而它们被统一集成在button组件里的一个open-type属性里面，也就是说，小程序为了更好的保护用户隐私，大部分涉及到授权的问题，都需要引导用户主动去授权，而不是强制被授权。

下面就主要来讲

解决保存图片到相册授权被拒绝后重新拉取授权的问题：

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

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

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

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

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

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

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

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

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

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

Javascript

const app = getApp();
const config = app.loadModel('Config');
const api = config.api;
let page = '';
let count = 0;
Page({

  /**
   * 页面的初始数据
   */
  data: {
    share_img: '',
    openSettingBtnHidden: false,
    saveImgBtnHidden: true,
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    page = this;

    //调接口把对应用户的对应图片拉出
    wx.showLoading({
      title: '生成中..',
    })


    //屈辱的延时,全局token方法执行速度慢于该自定义方法
    setTimeout(function() {
      page.getToken();
    }, 800);
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function() {

  },

  download: function() {
    wx.showLoading({
      title: '保存中..',
    })
    let share_img = this.data.share_img;
    const downloadTask = wx.downloadFile({
      url: share_img,
      success: function(res) {
        if (res.statusCode === 200) {
          console.log("res is", res);
          let savePath = res.tempFilePath;

          wx.hideLoading();
          wx.getImageInfo({
            src: savePath,
            success: function(res) {
              console.log('走到这里',res.path)
              wx.saveImageToPhotosAlbum({
                filePath: savePath,
                success(result) {
                  wx.showModal({
                    title: '提示',
                    content: '已保存到本地相册',
                    showCancel: false,
                  })
                  console.log('图片保存成功', res);
                }
              })
            }
          })
        }
      },
      fail: function() {
        wx.showToast({
          title: '保存失败,生成不成功',
        })
        wx.hideLoading();
      }
    });

    downloadTask.onProgressUpdate((res) => {
      console.log('下载进度', res.progress)
      console.log('已经下载的数据长度', res.totalBytesWritten)
      console.log('预期需要下载的数据总长度', res.totalBytesExpectedToWrite)
    })

  },

  getShareImage: function() {
    let that = this;
    let data = {
      token: app.globalData.token,
    }
    wx.request({
      url: 'https://gps.laoyaojing.net/api.php?c=exam&a=createShareImage',
      header: {
        "Content-Type": "application/x-www-form-urlencoded"
      },
      method: "POST",
      data: data,
      success: function(res) {
        console.log('resi is res', res);
        if (res.data.code == '200') {
          that.setData({
            share_img: res.data.result,
          });
          wx.hideLoading();
        }
      },
      fail: function() {
        wx.hideLoading();
      }
    })
  },

  getToken: function() {
    try {
      let token = app.globalData.token ? app.globalData.token : wx.getStorageSync('token');
      if (token) {
        page.getShareImage(token);
      } else {
        console.log('这次没拿到token');
        if (count < 10) {
          page.getToken();
        } else {
          return false;
        }
        count++;
      }
    } catch (e) {
      console.log('这次没拿到token');
      // page.getToken();
    }
  },

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

  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
      })
    }
  },
})

wxml

<view class='daySign_container'>
  <view class='daySign_top'>
    <text> 为您生成了专属签文～\n 快去分享到微信群和朋友圈吧！</text>
  </view>
  <view class='daySign_middle'>
    <image mode='aspectFit' src='{{share_img}}' class='share_img_style' />
  </view>
  <view class='daySign_bottom' >
    <view class='daySign_bottom_text' bindtap="save" hidden='{{saveImgBtnHidden}}'>保存图片</view>
    <button type='primary' class='daySign_bottom_text_pass' open-type="openSetting" bindopensetting='handleSetting' hidden='{{openSettingBtnHidden}}'>去授权</button>
  </view>
  
</view>

wxss

.daySign_container {
  height: 100vh;
  width: 100vw;
  background: black;
}

.daySign_top {
  opacity: 0.77;
  font-family: PingFangSC-Regular;
  font-size: 28rpx;
  color: #fff;
  line-height: 57rpx;
  text-align: center;
  letter-spacing: 2rpx;
  margin-top: 50rpx;
}

.daySign_middle {
  background: black;
  width: 100vw;
  height: 81vh;
  margin-top: 30rpx;
}

.daySign_bottom {
  width: 100%;
  position: absolute;
  bottom: 50rpx;
}

.daySign_bottom_text {
  height: 60rpx;
  bottom: 40rpx;
  left: 50%;
  right: 50%;
  background-color: #21d800;
  margin: 0rpx 32%;
  padding: 10rpx 30rpx;
  border-radius: 27rpx;
  text-align: center;
  font-size: 35rpx;
  line-height: 57rpx;
  font-weight: 600;
  color: #4a4a4a;
  letter-spacing: 3rpx;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.50);
}

.daySign_bottom_text_pass {
  background-color: #fee407;
  margin: 0rpx 32%;
  padding: 10rpx 30rpx;
  border-radius: 27rpx;
  text-align: center;
  font-size: 35rpx;
  line-height: 57rpx;
  font-weight: 600;
  color: #4a4a4a;
  letter-spacing: 3rpx;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.50);
}

.share_img_style {
  width: 100vw;
  height: 70vh;
}

直接复制不知道能不能用,但是JS的权限判断和重新拉取是没有问题的

我用的是网络路径作为图片路径保存的(https://cdn.xxxx.巴拉巴拉)

如果用canvas画图的话，在保存图片之前追加canvas生成即可

详细代码自行研究吧。

97pra

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
微信小程序保存图片到相册授权被拒绝后重新拉取授权的方法

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

扫一扫