当前位置：首页 > news >正文

uniapp开发：首次进入 App 弹出隐私协议窗口

news 2025/8/21 8:42:31

前言：在移动应用开发中，隐私协议弹窗是一个非常重要的功能。它不仅符合法律法规的要求（如 GDPR、CCPA 等），还能增强用户对 App 的信任感。本文将介绍如何在 Uniapp 开发的 App 中实现“首次进入弹出隐私协议窗口，用户确认后进入，否则退出 App”的功能。

实现思路：一、自定义协议弹框组件，用户点击同意按钮时，存储flag值为true；二、引入到登录页面，首次进入页面判断flag值，ture则代表非首次进入，无需弹出，无或者false则需要弹窗；

一、自定义组件：

（1）根目录新建components文件夹，新建组件privacy-agreement，如图：

在这里插入图片描述
（2）组件内部代码实现 privacy-agreement.vue：

<template><u-popup :show="show" mode="center" bgColor="transparent" zIndex="10077"><view class="privacy_con"><view class="title">用户隐私政策</view><view class="content_privacy"><text>欢迎使用小绿人APP！为了更好的向您提供服务，我们需要收集您的相关信息，在您使用APP前，请务必审慎阅读、充分理解“用户隐私政策”和“CFCA数字证书服务协议”各条款，您可阅读</text><navigator url="/pages/agreement/index?agreement=1" class="navigator">《用户服务协议》</navigator><text>和</text><navigator url="/pages/agreement/index?agreement=2" class="navigator">《隐私权政策》</navigator><text>了解详细信息。如果您同意，请点击下面按钮开始接受我们的服务。</text></view><view class="btn"><button class="no_btn" @click="exitapply">暂不同意</button><button class="yes_btn" @click="agreeEnter">同意并接受</button></view></view></u-popup>
</template><script>
export default {name: 'privacy-agreement',data() {return {show: false,};},methods: {open() {this.show = true;},// 退出应用exitapply(){if (plus.os.name.toLowerCase() === 'android') {plus.runtime.quit(); // 安卓退出应用console.log('安安卓');} else { console.log('ios');plus.ios.import('UIApplication').sharedApplication().performSelector('exit');  // iOS退出应用}},// 同意并进入应用agreeEnter(){uni.setStorageSync("firstLaunchFlag", true)plus.runtime.agreePrivacy()this.show = false;}},
};
</script><style lang="scss" scoped>
.privacy_con{width: 630rpx;height: 512rpx;background: linear-gradient(to bottom, #f9f2e7, #ffffff);border-radius: 32rpx;.title{width: 630rpx;height: 100rpx;color: #422206;font-size: 34rpx;font-weight: 600;line-height: 100rpx;text-align: center;}.content_privacy{width: 100%;height: 252rpx;padding: 0 32rpx;color: #232323;font-size: 26rpx;margin-top: 20rpx;margin-bottom: 24rpx;line-height: 40rpx;.navigator {color: #ED9B1C;font-weight: 500;display: inline-block;}}.btn{height: 100rpx;display: flex;align-items: center;justify-content: space-evenly;button{width: 262rpx;height: 88rpx;border-radius: 78rpx 78rpx 78rpx 78rpx;font-weight: bold;font-size: 28rpx;line-height: 88rpx;text-align: center;}.no_btn{background: #FAFAF9;color: #898B96;}.yes_btn{background-color: #E2AC59;color: #FFFFFF;}}
}
</style>

二、引入到登录页或者首页（打开app进入的第一个页面）

<template><view><view class="">登录页或者首页其他内容。。。。。。。</view><!-- 首次进入app 隐私协议弹框 --><privacy-agreement ref="privacyPop"></privacy-agreement></view>
</template>
<script>data() {return {}},methods:{},onLoad() {// 首次进入app, 展示隐私协议// #ifdef APP-PLUS | H5let firstLaunchFlag = uni.getStorageSync("firstLaunchFlag");console.log("firstLaunchFlag", firstLaunchFlag);if (firstLaunchFlag) {return}else{uni.showLoading({mask: true})setTimeout(()=>{uni.hideLoading()this.$refs["privacyPop"].open()}, 300)}// #endif},
</script>