UNIAPP打包APP端自定义隐私政策提示框实现

77 阅读 0 评论 51 点赞

我是靠谱客的博主优雅大船，最近开发中收集的这篇文章主要介绍UNIAPP打包APP端自定义隐私政策提示框实现，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

在将uniapp打包成APP端时，上架到应用市场的时候需要配置隐私弹窗。Android平台可以通过manifest.json自定义配置，但是ios端没有，于是就自定义了一个隐私政策弹窗。

<template>
<view>
<view class="modal-container" v-if="agreeShow">
<view class="modal-wrap">
<view class="modal">
<view class="modal-title">隐私政策和用户协议</view>
<view style="font-size: 28rpx;color: #999992;">
欢迎使用XXXXAPP！.....您同意并接受全部条款后可开始使用我们的全部服务。
</view>
<view @click="agree" class="agree">同意并接受</view>
<view class="notAgree">
<text @click="refuse">暂不同意</text>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
agreeShow: false
}
},
onLoad() {
// 使用本地存储判断是否有同意过协议的标识
let agree = uni.getStorageSync('agree')
console.log(agree)
if (agree != 1) {
this.agreeShow = true
}
},
methods: {
// 同意隐私政策
agree() {
uni.setStorageSync('agree', 1);
this.agreeShow = false
},
// 拒绝隐私政策-退出应用
refuse() {
// #ifdef APP-PLUS
//android 退出方法
plus.runtime.quit();
// ios 退出方法
plus.ios.import('UIApplication').sharedApplication().performSelector('exit');
// #endif
},
}
}
</script>
<style lang="scss" scoped>
.modal-container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.7);
.modal-wrap {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
.modal {
width: 550rpx;
background: #FFFFFF;
border-radius: 22rpx;
padding: 20px;
.modal-title {
text-align: center;
font-size: 15px;
color: #333;
font-weight: 700;
padding-bottom: 25px;
}
.agree {
height: 45px;
background-color: #0290FE;
border-radius: 22rpx;
text-align: center;
line-height: 50px;
color: #FFFFFF;
margin-top: 15px
}
.notAgree {
background-color: #fff;
text-align: center;
color: #999;
margin-top: 15px;
}
}
}
}
</style>