ARTICLE · INTELLIGENCE

战地情报 · 详情页

来自尧图项目组的一线实战观察与深度解析

uniapp APP权限弹框(超好用)

uniapp APP权限弹框(超好用) 注意uni.previewImage() api长按保存不会触发效果图第一步 新建一个页面设置透明{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内监听权限调用scriptimport APPUpdate from /uni_modules/zhouWei-APPUpdate/js_sdk/appUpdate;exportdefault{onLaunch:function(){console.log(App Launch)// #ifdef APPAPPUpdate()// 监听系统权限申请if(uni.$u.sys().osNameandroid){console.log(权限监听);this._permissionDiscShowingfalse this._permissionDiscClosingfalse this._locationDeniedModalShowingfalse this.permissionListeneruni.createRequestPermissionListener();this.permissionListener.onConfirm((e){console.log(弹出系统权限授权框,e);// 说明页已打开/正在关闭时不再重复跳转精确定位粗略定位会连续触发if(this._permissionDiscShowing||this._permissionDiscClosing)returnthis._permissionDiscShowingtrue uni.navigateTo({url:/pages/permissionDisc/permissionDisc?typeencodeURIComponent(JSON.stringify(e)),fail:(){this._permissionDiscShowingfalse}});});this.permissionListener.onComplete((e){console.log(权限申请完成,e,uni.$u.page());// 同意或拒绝都关闭说明页再按需提示拒绝去设置this.closePermissionDiscPage((){this.handleLocationPermissionDenied(e)})});}// #endif},onShow:function(){console.log(App Show)},onHide:function(){console.log(App Hide)},methods:{// 关闭权限说明页同意/拒绝都要关closePermissionDiscPage(done){constfinish(){this._permissionDiscShowingfalse this._permissionDiscClosingfalse donedone()}constpagesgetCurrentPages()constcurpages.length?pages[pages.length-1]:nullconstroutecur?(cur.route||):constisDiscPageroute.indexOf(permissionDisc/permissionDisc)!-1// 既没打开标记、当前也不是说明页无需关闭if(!this._permissionDiscShowing!isDiscPage){finish()return}// 正在关闭中避免重复 navigateBackif(this._permissionDiscClosing){donedone()return}this._permissionDiscClosingtrueif(isDiscPage){uni.navigateBack({complete:finish})}else{// 标记开着但页面栈已不在说明页异常情况直接复位finish()}},// 定位权限被拒绝时弹框引导去设置handleLocationPermissionDenied(perms){// #ifdef APP// 弹框已在展示中避免多次弹出if(this._locationDeniedModalShowing)returnconstlocationKeys[android.permission.ACCESS_FINE_LOCATION,android.permission.ACCESS_COARSE_LOCATION]constlistArray.isArray(perms)?perms:[]constaskedLocationlist.some(plocationKeys.includes(p))if(!askedLocation)returnconstsettinguni.getAppAuthorizeSettinguni.getAppAuthorizeSetting()constlocationStatussettingsetting.locationAuthorized// authorized / denied / not determined / config errorif(locationStatus!denied)returnthis._locationDeniedModalShowingtrue uni.showModal({title:定位权限未开启,content:定位权限已被拒绝需要您手动开启才能正常使用相关功能,confirmText:去设置,cancelText:取消,success:(res){if(res.confirm){uni.openAppAuthorizeSetting()}},complete:(){// 关闭后再短暂锁定避免紧接着的重复回调再次弹出setTimeout((){this._locationDeniedModalShowingfalse},1500)}})// #endif}}}第三步 页面内写弹框内容pages/permissionDisc/permissionDisctemplateviewview classmask:style{ width: windowWidth px, height: windowHeight px }stylepadding-top: 60rpx;view classblockv-for(item, index) in showList:keyindex:style{ width: windowWidth * 0.8 px }view classtitletext classtitlestylemargin-bottom: 0{{item.name}}/text/viewview classcontenttext classcontent{{item.content}}/text/view/view/view/view/templatescriptexportdefault{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 rawe.type||try{rawdecodeURIComponent(raw)}catch(err){}let listraw?JSON.parse(raw):[];list.forEach((item){if(this.permissionList[item]){this.showList.push(this.permissionList[item]);}});}catch(e){//TODO handle the exceptionconsole.log(e);}// #ifdef APPthis.osNameplus.os.name;// #endif// this.osName Androidthis.isIosthis.osNameiOS;if(this.isIostrue)this.showfalse;let windowinfouni.getWindowInfo();this.windowWidthwindowinfo.windowWidth;this.windowHeightwindowinfo.windowHeight;},methods:{}};/scriptstylepage{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
RELATED READING

延伸阅读

更多一线实战笔记与深度复盘,助您持续精进