高端建站设计网站开发角色分配权限
管控背景
根据《工业和信息化部关于进一步提升移动互联网应用服务能力的通知》加强个人信息保护章节要求合理申请使用权限:在调用终端相册、通讯录、位置等权限时，同步告知用户申请该权限的目的。
管控解析
- 管控范围:该规则适用于以下敏感权限申请行为--电话、通讯录、定位、短信、麦克风(录音)、相机、存储、日历、身体传感器、通话记录、健康运动;
- 同步告知要求:需在应用内，权限弹窗申请的同时，告知权限申请的使用目的。
点击整改规范查看原文
实现方案
使用uniapp官方文档中的监听权限申请（uni.createRequestPermissionListener()）
- 首先封装一个组件permisonPopup.vue
<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>
存在问题点：由于系统权限弹出层级较高，无法覆盖，具体页面使用可能会导致看不清，目前没有好的解决方法，暂时使用更改相对颜色解决，根据个人使用场景自行更改背景色和字体颜色
2. 封装通用方法watchPermision.js
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');}};}
};3. 在main.js中全局引入，方便每个页面可直接使用
import watchPermis from '@/components/permsionWatch/watchPermision.js';
Vue.use(watchPermis)
import watchPermision from '@/components/permsionWatch/permisonPopup.vue';
Vue.component('watchPermision', watchPermision);4. 使用方法
<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('权限名称'，'使用目的')
最终效果图：