效果图
第一步 新建一个页面，设置透明
c
{
"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
c
// #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第三步 页面内写弹框内容
c
<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>