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 exception
			console.log(e);
		}
		// #ifdef APP
		this.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>