解决 uniapp 开发中权限申请同步告知目的问题| 华为应用商店上架审核问题解决

管控背景

根据《工业和信息化部关于进一步提升移动互联网应用服务能力的通知》加强个人信息保护章节要求合理申请使用权限:在调用终端相册、通讯录、位置等权限时，同步告知用户申请该权限的目的。

管控解析

管控范围:该规则适用于以下敏感权限申请行为--电话、通讯录、定位、短信、麦克风(录音)、相机、存储、日历、身体传感器、通话记录、健康运动;
同步告知要求:需在应用内，权限弹窗申请的同时，告知权限申请的使用目的。

点击整改规范查看原文

实现方案

使用uniapp官方文档中的监听权限申请（uni.createRequestPermissionListener()）

首先封装一个组件permisonPopup.vue

html 复制代码

<template>
	<view>
		<view class="popup-container">
			<view class="permission-alert" id="permission-alert">
				<text style="font-size: 40rpx; margin-bottom: 20rpx; display: block">{{ permisionName }}权限申请说明：</text>
				<text>{{ purpose }}</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		permisionName: {
			type: String,
			default: '' // 默认空文本
		},
		purpose: {
			type: String,
			default: '' // 默认按钮文本
		}
	},
	methods: {}
};
</script>

<style scoped>

.popup-container {
	position: fixed;
	top: 10%;
	left: 50%;
	width: 90%;
	transform: translate(-50%, -50%);
	z-index: 99999999999999999;
	background-color: #b5c3d2;
	border-radius: 32rpx;
	padding: 24rpx;
	color: #000;
	padding-top: 40rpx;
}
</style>

存在问题点：由于系统权限弹出层级较高，无法覆盖，具体页面使用可能会导致看不清，目前没有好的解决方法，暂时使用更改相对颜色解决，根据个人使用场景自行更改背景色和字体颜色

封装通用方法watchPermision.js

html 复制代码

export default {
	install(Vue) {
		// 在 Vue 原型上挂载全局方法
		Vue.prototype.$watchPermission = function(callback) {
			if (uni.getSystemInfoSync().platform === 'android') {
				const permissionListener = uni.createRequestPermissionListener();

				permissionListener.onConfirm((e) => {
					console.log('Permission Confirmed:', e);
					if (callback && typeof callback === 'function') {
						callback('confirmed', e);
					}
				});

				permissionListener.onComplete((e) => {
					console.log('Permission Check Complete:', e);
					if (callback && typeof callback === 'function') {
						callback('complete', e);
					}
				});
			} else {
				callback('complete');
			}
		};


	}
};

在main.js中全局引入，方便每个页面可直接使用

javascript 复制代码

import watchPermis from '@/components/permsionWatch/watchPermision.js';
Vue.use(watchPermis)
import watchPermision from '@/components/permsionWatch/permisonPopup.vue';
Vue.component('watchPermision', watchPermision);

使用方法

html 复制代码

<template>
	<view>
		<watchPermision v-if="permissionsStatus" :permisionName="permisionName" :purpose="purpose" />
	</view>
</template>

<script>
export default {
	data() {
		return {
			permissionsStatus: false, //控制弹窗是否展示
			permisionName: '', //权限名字
			purpose: '', //授权目的
			
		};
	},

	onLoad() {},

	onShow() {
		this.watchPermission('相机', '为了确保您能够顺利使用扫码功能做什么事，请授权相机权限。');
//如果是一进入页面就调用权限，请根据自己情况放在对应的生命周期，一定要放在授权之前调用
		
	},
	onReady() {},
	methods: {
		watchPermission(name, use) {
			this.$watchPermission((status, e) => {
				if (status === 'confirmed') {
					this.permissionsStatus = true;
					this.permisionName = name;
					this.purpose = use;
				} else if (status === 'complete') {
					this.permissionsStatus = false;
				}
			});
		},

		


		scanByGallery() {
			this.watchPermission('相册', '为了确保您能够顺利使用什么东西做什么事，请授权相册权限。');
			//调用权限逻辑xxx
		},

		

		
	}
};
</script>

<style lang="scss">

</style>

用法说明： 在需要使用的页面添加watchPermission()方法，在授权前调用，一定要在每个授权前添加this.watchPermission('权限名称'，'使用目的')

最终效果图：