微信小程序保存图片到相册授权被拒绝后重新拉取授权的方法
近期开发过小程序的童鞋应该已经知道，小程序某些接口已废弃，改用新的接口。
比如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
为您生成了专属签文～\n 快去分享到微信群和朋友圈吧！
保存图片
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生成即可
详细代码自行研究吧。