微信小程序授權保存圖片后拒絕授權，（當拒絕授權后，微信再次調用保存不在出現授權彈窗）；

這么一來，微信提供給開發者的解決方法就是跳入設置頁面里面讓用戶自己打開權限。

那么今天自己自定義了一個組件。

根目錄創建一個目錄—components
創建目錄命名為 – （自取）我這里命名為sope
sope.js
sope.json
sope.wxml
sope.wxss

sope.wxml```<view class="mask {{maskActive}}" catchtouchmove="stopPageScroll" ><view class="mask-box" style="{{toggle}}"><view class="mask-01"><view class="wechat">微信授權</view><view>獲取權限</view><view>● 保存圖片或視頻到你的相冊</view><image src="https://img-blog.csdnimg.cn/20190814144907211.png" class="sope" mode="widthFix"></image></view><view class="mask-btn-box"><view catchtap="configqx" data-scopeWritePhotosAlbum="{{!scopeWritePhotosAlbum}}">取消</view><button open-type="openSetting" catchtap="configqx" class="settingClass">去設置頁</button></view></view></view>```sope.wxss```.mask{background: rgba(0, 0, 0, .5);position: fixed;top: 0;left: 0;right: 0;bottom: 0;display: flex;justify-content: center;flex-direction: column;transition: all .60s;opacity: 0;z-index: -99;}.maskActive{z-index: 99;opacity: 1;}.mask .mask-box{position: fixed;width: 100%;height: 100%;transition: all .60s;bottom: -100%;}.mask .mask-01{background: #fff;padding: 30rpx 0;display: flex;justify-content: center;flex-direction: column;font-size: 34rpx;color: #333;width: 100%;border-radius: 16rpx 16rpx 0 0;position: absolute;bottom: 200rpx;}.mask .mask-01 view:nth-child(1){padding: 20rpx 40rpx;color: #4BC065;font-weight: 600;font-size: 36rpx;}.mask .mask-01 view:nth-child(2){padding: 10rpx 40rpx;font-size: 30rpx;}.mask .mask-01 view:nth-child(3){font-size: 28rpx;color: #ACACAC;padding: 30rpx 40rpx;}.mask .mask-01 .sope{position: absolute;right: 100rpx;width: 120rpx;}.mask .mask-btn-box{width: 100%;background: #fff;display: flex;justify-content: space-around;align-items: center;position: absolute;bottom: 0;height: 200rpx;}.mask .mask-btn-box view{display: flex;justify-content: center;align-items: center;color: #4BC065 !important;background: #EDEDED !important;}.mask .mask-btn-box view,.mask .mask-btn-box .settingClass{width: 40%;text-align: center;font-size: 32rpx;font-weight: 500;padding: 20rpx 0;margin: 0;background: #fff;position: sticky;color: #fff;background: #4BC065;display: flex;align-items: center;justify-content: center;line-height: 1;border-radius: 10rpx;}button::after{content: "";border: none;}```sope.json```{"component": true}```sope.js```Component({data:{toggle:'',maskActive:''},properties:{scopeWritePhotosAlbum:{type:Boolean,value:false}},observers:{scopeWritePhotosAlbum:function(e){console.log(e)e ? this.setData({ toggle: "bottom:0%;", maskActive: 'maskActive' }) : this.setData({ toggle: '', maskActive:'' });}},methods:{configqx(){this.triggerEvent("configqx", !this.data.scopeWritePhotosAlbum);},stopPageScroll() { return }}})```

上面組件部分代碼已完成

下面是如何使用該組件

test.wxml
test.js
test.json

首先引用該組件 test.json```{"usingComponents": {"sope":"/components/sope/sope"}}```test.wxml```<view catchtap="saveImg">保存圖片</view><sope scopeWritePhotosAlbum="{{scopeWritePhotosAlbum}}" bind:configqx="configqxClick"></sope>```test.js```Page({data: {},saveImg(){this.setData({ scopeWritePhotosAlbum: true });},configqxClick(e){ this.setData({ scopeWritePhotosAlbum: e.detail }) },})```

總結

以上是生活随笔為你收集整理的微信小程序---授权保存图片或视频，拒绝后不在出现弹窗---自定义组件弹窗的全部內容，希望文章能夠幫你解決所遇到的問題。

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