uniapp APP权限弹框

效果图

在这里插入图片描述

第一步新建一个页面，设置透明

{"path": "pages/permissionDisc/permissionDisc","style": {"navigationBarTitleText": "","navigationStyle": "custom","app-plus": {"animationType": "fade-in", // 设置fade-in淡入动画，为最合理的动画类型"background": "transparent", // 背景透明"backgroundColor": "transparent", // 背景透明"webviewBGTransparent": true,"mask": "none","popGesture": "none", // 关闭IOS屏幕左边滑动关闭当前页面的功能"bounce": "none" // 将回弹属性关掉}}
}

第二步 APP.vue内监听权限调用

需要使用uview的API监听，跳转到新建的页面

uview地址：https://uviewui.com/js/fastUse.html

// #ifdef APP-PLUS
// 监听系统权限申请
if (uni.$u.sys().osName == 'android') {console.log('权限监听');this.permissionListener = uni.createRequestPermissionListener();this.permissionListener.onConfirm((e) => {console.log('弹出系统权限授权框', e);uni.navigateTo({url: '/pages/permissionDisc/permissionDisc'+'?type=' + JSON.stringify(e),complete(e) {console.log(e);}});});this.permissionListener.onComplete((e) => {console.log('权限申请完成', e, uni.$u.page());// 拒绝时也会走需要处理一下，提示拒绝手动开启if (uni.$u.page() == '/pages/permissionDisc/permissionDisc') {uni.navigateBack();}});
}
// #endif

第三步页面内写弹框内容

<template><view><view class="mask" :style="{ width: windowWidth + 'px', height: windowHeight + 'px' }" style="padding-top: 60rpx;"><view class="block" v-for="(item, index) in showList" :key="index" :style="{ width: windowWidth * 0.8 + 'px' }"><view class="title"><text class="title" style="margin-bottom: 0">{{ item.name }}</text></view><view class="content"><text class="content">{{ item.content }}</text></view></view></view></view>
</template><script>
export default {name: 'permission',data() {return {show: false,flag: true,title: '',content: '',osName: '',isIos: false,pIndex: 0,permissionList: {'android.permission.ACCESS_COARSE_LOCATION':{name: '访问粗略地理位置',content: '用于将服务根据距离排序，并显示与您的距离，不授权该权限会影响app的正常使用'},'android.permission.ACCESS_FINE_LOCATION': {name: '访问精确地理位置',content: '用于将服务根据距离排序，并显示与您的距离，不授权该权限会影响app的正常使用'},'android.permission.CAMERA': {name: '使用摄像头权限',content: '用于更换、上传您的头像、图片功能，不授权该权限会影响app的正常使用'},'android.permission.READ_EXTERNAL_STORAGE': {name: '读照片及文件权限',content: '用于更换、上传您的头像、图片功能，不授权该权限会影响app的正常使用'},'android.permission.WRITE_EXTERNAL_STORAGE': {name: '写照片及文件权限',content: '用于更换、上传您的头像、图片功能，不授权该权限会影响app的正常使用'},'android.permission.READ_MEDIA_IMAGES': {name: '读媒体图片权限',content: '用于更换、上传您的头像、图片功能，不授权该权限会影响app的正常使用'},'android.permission.READ_MEDIA_VIDEO': {name: '读媒体视频权限',content: '用于更换、上传您的头像、图片功能，不授权该权限会影响app的正常使用'},'android.permission.CALL_PHONE': {name: '使用拨打电话权限',content: '用于直接拨打您点击的电话号码，不授权该权限将无法拨打'},'android.permission.RECORD_AUDIO': {name: '使用麦克风权限',content: '用于录制声音，发送语音消息，语音通话，不授权该权限会影响app的正常使用'}},windowWidth: 0,windowHeight: 0,showList: []};},computed: {},onLoad(e) {try {let list = e.type ? JSON.parse(e.type) : [];list.forEach((item) => {this.showList.push(this.permissionList[item]);});} catch (e) {//TODO handle the exceptionconsole.log(e);}// #ifdef APPthis.osName = plus.os.name;// #endif// this.osName = 'Android'this.isIos = this.osName == 'iOS';if (this.isIos == true) this.show = false;let windowinfo = uni.getWindowInfo();this.windowWidth = windowinfo.windowWidth;this.windowHeight = windowinfo.windowHeight;},methods: {}
};
</script><style>
page {width: 100%;height: 100%;background: rgba(0, 0, 0, 0.4);
}
.mask {width: 100vw;height: 100vh;background-color: rgba(0, 0, 0, 0);position: fixed;top: 0;left: 0;z-index: 99999;/* display: flex;justify-content: flex-start;align-items: center; */
}.block {width: 80%;background-color: #fff;padding: 15rpx;margin-top: 30rpx;margin-left: 60rpx;border-radius: 15rpx;
}.title {font-size: 32rpx;font-weight: bold;margin-bottom: 5rpx;
}.content {font-size: 24rpx;
}
</style>