当前位置：首页 > uni-app

uniapp自定义隐私政策弹窗

2026-01-13 18:51:10uni-app

实现自定义隐私政策弹窗

在UniApp中实现自定义隐私政策弹窗，通常需要结合条件渲染和本地存储功能。以下是一个典型实现方案：

模板部分

<template>
  <view class="privacy-popup" v-if="showPrivacyPopup">
    <view class="popup-content">
      <view class="title">隐私政策</view>
      <scroll-view scroll-y class="content">
        <!-- 这里放置隐私政策内容 -->
        您的隐私政策文本内容...
      </scroll-view>
      <view class="button-group">
        <button @tap="rejectPrivacy">拒绝</button>
        <button @tap="acceptPrivacy">同意</button>
      </view>
    </view>
  </view>
</template>

样式部分

.privacy-popup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.popup-content {
  width: 80%;
  background-color: #fff;
  border-radius: 10px;
  padding: 20px;
}

.content {
  max-height: 60vh;
  margin: 15px 0;
}

脚本部分

export default {
  data() {
    return {
      showPrivacyPopup: false
    }
  },
  onLoad() {
    this.checkPrivacyAgreement()
  },
  methods: {
    checkPrivacyAgreement() {
      const hasAgreed = uni.getStorageSync('hasAgreedToPrivacy')
      if (!hasAgreed) {
        this.showPrivacyPopup = true
      }
    },
    acceptPrivacy() {
      uni.setStorageSync('hasAgreedToPrivacy', true)
      this.showPrivacyPopup = false
    },
    rejectPrivacy() {
      // 根据需求处理拒绝情况
      uni.showToast({
        title: '需要同意隐私政策才能使用',
        icon: 'none'
      })
    }
  }
}

处理多平台差异

不同平台对隐私政策有不同要求，需要特殊处理：

微信小程序 需要在app.json中配置隐私相关设置：

{
  "__usePrivacyCheck__": true,
  "privacy": {
    "template": "privacy"
  }
}

App端 需要配置原生隐私政策弹窗，在manifest.json中添加：

"app-plus": {
  "privacy": {
    "prompt": "template",
    "template": {
      "title": "隐私政策",
      "message": "请仔细阅读隐私政策"
    }
  }
}

高级功能实现

版本更新检测 当隐私政策更新时，需要重新弹出：

checkPrivacyVersion() {
  const agreedVersion = uni.getStorageSync('privacyVersion')
  const currentVersion = '1.0.2' // 当前版本号
  if (agreedVersion !== currentVersion) {
    this.showPrivacyPopup = true
  }
}

多语言支持 使用i18n实现多语言隐私政策：

acceptPrivacy() {
  uni.setStorageSync('hasAgreedToPrivacy', true)
  uni.setStorageSync('privacyVersion', this.currentVersion)
  this.showPrivacyPopup = false
  this.$i18n.locale = uni.getStorageSync('language') || 'zh-CN'
}