效果圖

第一步 新建一個頁面，設置透明

{"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 exceptionconsole.log(e);}// #ifdef APPthis.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>