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

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

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

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

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

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

微信小程序授权保存图片到相册
在微信小程序中,做分享朋友圈,保存图片视频到相册,需要授权,会经常遇到.有时用户误操作,第一次拒绝授权弹框后,微信会认为用户拒绝该授权意愿并且不会再次调起授权弹框,这是该怎么办呢? 1.授权情况分析 ...
uniapp微信小程序授权登录和获取微信绑定的手机号码
uniapp微信小程序授权登录和获取微信绑定的手机号码弹出授权的弹框 <view class="weixinOk" @tap="getUserProfile&qu ...
浅谈微信小程序授权应用
微信小程序中关乎"授权"的,抛开各路"牛鬼蛇神"不谈,大体上也就两种: 位置授权用户信息授权切记的是:在微信一直打着的"用户至上"的旗号 ...
微信小程序去水印怎么看视频
微信小程序去水印怎么看视频在短视频操作中,视频修改的作用显得尤为重要,这里介绍几款常见的工具 1,批量下载软件(短视频无水印下载) 2,批量消重伪原创软件(视频深度消重伪原创处理) 歌乐软件,专 ...
微信小程序授权登录第一次总是失败，第二次登录便正常了
微信小程序授权登录第一次总是失败,第二次登录便正常了错误流程调用用户点击授权用户信息按钮 ===> 调用wx.login( )生成code发送给后台生成session_key解密 ===& ...
微信小程序授权登录报错encryted_data或iv不合法，前端坑^-^~~
微信小程序授权登录原来用的wx.getUserInfo(),在用户未授权过的情况下调用此接口,将不再出现授权弹窗, 会直接进入 fail 回调(详见<公告>).在用户已授权的情况下调用此接 ...
微信小程序授权获取头像昵称的最新形式——头像昵称填写
微信小程序授权用户信息,不知道有没有人像我一样,从wx.getUserInfo到wx.getUserProfile再到头像昵称填写获取用户头像昵称全部尝试了一遍,怪就怪自己一开始没仔细看官方文档,没注 ...
微信小程序授权登录界面
微信小程序授权登录界面原先用的 wx.getUserInfo(Object object) ,现已改革现用的 wx.getUserProfile(Object object),获取用户信息.每次请 ...
微信小程序授权登录页面（有提示窗）
微信小程序授权登录(有弹窗提示) 1 效果显示 1.1 授权登录页面 1.2 授权登录提示弹窗 1.3 拒绝授权登录 1.4 允许登录后,跳转到小程序首页 2 代码 2.1 wxml 文件 <v ...

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

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

最新文章

热门文章