微信小程序---授权保存图片或视频，拒绝后不在出现弹窗---自定义组件弹窗

微信小程序授权保存图片后拒绝授权，（当拒绝授权后，微信再次调用保存不在出现授权弹窗）；

这么一来，微信提供给开发者的解决方法就是跳入设置页面里面让用户自己打开权限。

那么今天自己自定义了一个组件。

根目录创建一个目录—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 }) },
	  
	})
	```