小程序-相册授权

今天我们讲一讲小程序里相册授权的问题。

一、询问是否拥有相册权限

// 先询问权限的问题
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>