当前位置: 首页 > article >正文

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>


http://www.kler.cn/a/590017.html

相关文章:

  • 图论——广度优先搜索实现
  • golang-嵌套结构体
  • Python----计算机视觉处理(Opencv:ROI图像切割)
  • 基于FPGA的3U机箱轨道交通网络通讯板,对内和主控板、各类IO板通信,对外可进行RS485、CAN或MVB组网通信
  • 结构型模式之组合模式:让对象构成树形结构
  • 数据结构——双向链表dlist
  • 360安全软件拦截鼠标键盘模拟操作的解决方法
  • 【CPU】CPU多级缓存和MESI一致性协议
  • C# 封装数据 详解
  • Prompt Learning Awesome
  • 东隆科技携手PRIMES成立中国校准实验室,开启激光诊断高精度新时代
  • NLP高频面试题(三)——普通RNN的梯度消失和梯度爆炸问题
  • Dify 搭建
  • css实现报警特效
  • Unity插件-适用于画面传输的FMETP STREAM使用方法(二)组件介绍
  • 【蓝桥杯】1124修建公路1(Kruskal算法)
  • 机器学习之激活函数
  • 文件解析漏洞靶场---解析详解
  • 利用hexo+github部署属于自己的个人博客网站(2025年3月所写)
  • 实现电商网站商品检索