今天我們講一講小程序里相冊授權的問題。

一、詢問是否擁有相冊權限

// 先詢問權限的問題 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>

總結

以上是生活随笔為你收集整理的小程序-相册授权的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。