今天我们讲一讲小程序里相册授权的问题。
一、询问是否拥有相册权限
// 先询问权限的问题
checkWriteAlbumAuth() {
return new Promise(resolve => {
wx.getSetting({
success(res) {
resolve(res.authSetting['scope.writePhotosAlbum'] || false);
},
fail() {
resolve(false);
}
});
});
};
二、开启权限
// 保存图片到相册
async savePhotoHandler(callback) {
const that = this;
// 询问相册权限
this.writePhotoAuth = await this.checkWriteAlbumAuth.call(this);
if (!this.writePhotoAuth) {
// 如果没有权限,询问有没权限
wx.authorize({
scope: 'scope.writePhotosAlbum',
success: async function() {
// 开启权限的操作
.......
},
fail: function(err) {
// 授权时点击了取消
if (err.errMsg !== 'authorize:fail auth deny') {
// 用户取消授权时的操作
}
}
});
} else {
// 有权限的操作
.......
}
}
但是这里存在一个问题,如果用户手动出发了取消,下一次小程序自身是不会触发开启相册权限的弹窗的,所以为了再次触发,我们可以利用其它方法实现。(再用户取消授权时,重新触发一次授权)。
2.1 当用户取消权限,重新触发授权操作
<!-- 保存至相册权限提示 -->
<template>
<cover-view class="permissions-settings" wx:if="{{ showPermissionsSetting }}">
<cover-view class="tips-content fz-18">请开启保存到相册的权限 </cover-view>
<cover-view class="fz-18 text">开启后需重新点击马上报名按钮</cover-view>
<cover-view class="bottom-btn">
<cover-view class="cancle line fz-18 font-bold" @tap="closePemissions">取消</cover-view>
<button class="line sure-btn fz-18 font-bold" @opensetting="openSetting" open-type="openSetting">
<cover-view>去开启</cover-view>
</button>
</cover-view>
</cover-view>
<cover-view class="hide-bg" wx:if="{{ showPermissionsSetting }}"></cover-view>
</template>
<script>
export default {
data() {
showPermissionsSetting: false, // 开启是否授权的弹窗
},
methods: {
// 关闭授权的自定义框
closePemissions() {
this.showPermissionsSetting = false;
this.$apply();
},
// 打开权限
openSetting(e) {
this.showPermissionsSetting = false;
if (e.detail.authSetting['scope.writePhotosAlbum']) {
// 开启权限之后的事
......
}
this.$apply();
},
}
}
</script>
<style lang="less">
.hide-bg {
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.65);
z-index: 997;
width: 100vw;
height: 100vh;
}
.permissions-settings {
width: 606rpx;
background: rgba(255, 255, 255, 1);
border-radius: 8rpx;
text-align: center;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 998;
.tips-content {
padding-top: 54rpx;
padding-bottom: 8rpx;
line-height: 50rpx;
z-index: 39;
}
.text {
line-height: 50rpx;
padding-bottom: 48rpx;
z-index: 39;
}
.bottom-btn {
border-top: 1rpx solid rgba(0, 0, 0, .1);
height: 100rpx;
line-height: 100rpx;
align-items: center;
overflow: hidden;
.cancle {
text-align: center;
width: 50%;
float: left;
border-right: 1rpx solid #E2E4EA;
color: #606266;
height: 100rpx;
line-height: 100rpx;
box-sizing: border-box;
}
.sure-btn {
height: 100%;
line-height: 100rpx;
text-align: center;
width: 50%;
float: right;
color: #2F8CEF;
background: transparent;
}
}
}
</style>
上面的意思:手动打开授权的弹窗再让用户授一次权。这样就可以多次反复询问用户权限。
完整代码如下:
<template>
<!-- 保存至相册权限提示 -->
<cover-view class="permissions-settings" wx:if="{{ showPermissionsSetting }}">
<cover-view class="tips-content fz-18">请开启保存到相册的权限 </cover-view>
<cover-view class="fz-18 text">开启后需重新点击马上报名按钮</cover-view>
<cover-view class="bottom-btn">
<cover-view class="cancle line fz-18 font-bold" @tap="closePemissions">取消</cover-view>
<button class="line sure-btn fz-18 font-bold" @opensetting="openSetting" open-type="openSetting">
<cover-view>去开启</cover-view>
</button>
</cover-view>
</cover-view>
<cover-view class="hide-bg" wx:if="{{ showPermissionsSetting }}"></cover-view>
</template>
<script>
import wepy from 'wepy';
export default class SwiperList extends wepy.component {
data = {
writePhotoAuth: null, // 相册权限
showPermissionsSetting: false, // 相册授权的框
};
methods = {
// 关闭授权的自定义框
closePemissions() {
this.showPermissionsSetting = false;
this.$apply();
},
// 打开权限
openSetting(e) {
this.showPermissionsSetting = false;
if (e.detail.authSetting['scope.writePhotosAlbum']) {
this.savePhoto.call(this);
}
this.$apply();
},
};
// 先询问权限的问题
checkWriteAlbumAuth() {
return new Promise(resolve => {
wx.getSetting({
success(res) {
resolve(res.authSetting['scope.writePhotosAlbum'] || false);
},
fail() {
resolve(false);
}
});
});
};
// 保存图片到相册
async savePhotoHandler(callback) {
const that = this;
// 询问相册权限
this.writePhotoAuth = await this.checkWriteAlbumAuth.call(this);
if (!this.writePhotoAuth) {
// 如果没有权限,询问有没权限
wx.authorize({
scope: 'scope.writePhotosAlbum',
success: async function() {
that.savePhoto.call(that);
},
fail: function(err) {
// 授权时点击了取消
if (err.errMsg !== 'authorize:fail auth deny') {
that.showPermissionsSetting = true;
that.$apply();
}
}
});
} else {
that.iShowAttentionOrQrCode = false;
this.$apply();
this.savePhoto.call(that);
}
};
savePhoto() {
let _self = this;
wx.downloadFile({
url: _self.bgUrl,
success: function (res) {
// 保存图片到系统相册
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success(res) {
},
fail(res) {
}
});
},
});
};
}
</script>
<style lang="less">
.hide-bg {
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.65);
z-index: 997;
width: 100vw;
height: 100vh;
}
.permissions-settings {
width: 606rpx;
background: rgba(255, 255, 255, 1);
border-radius: 8rpx;
text-align: center;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 998;
.tips-content {
padding-top: 54rpx;
padding-bottom: 8rpx;
line-height: 50rpx;
z-index: 39;
}
.text {
line-height: 50rpx;
padding-bottom: 48rpx;
z-index: 39;
}
.bottom-btn {
border-top: 1rpx solid rgba(0, 0, 0, .1);
height: 100rpx;
line-height: 100rpx;
align-items: center;
overflow: hidden;
.cancle {
text-align: center;
width: 50%;
float: left;
border-right: 1rpx solid #E2E4EA;
color: #606266;
height: 100rpx;
line-height: 100rpx;
box-sizing: border-box;
}
.sure-btn {
height: 100%;
line-height: 100rpx;
text-align: center;
width: 50%;
float: right;
color: #2F8CEF;
background: transparent;
}
}
}
</style>