微信小程序接入用户隐私协议提示教程

最新推荐文章于 2025-03-24 19:21:55 发布

＆超

最新推荐文章于 2025-03-24 19:21:55 发布

阅读量4k

点赞数 1

分类专栏：微信小程序文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/qq_44933075/article/details/132830316

版权

微信小程序专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了如何在微信小程序中实现用户隐私保护，包括设置用户保护指引、查询隐私授权状态、配置弹窗组件以及在app.json中的设置。强调了开发过程中检查基础库版本和正确处理隐私权限的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

接入前须知

官方对接入隐私提示进行了操作步骤

1、 pc小程序管理端设置用户保护指引设置
2、对开启的保护指引进行填写
3、查看官方示例进行接入
官方用户授权事件说明
展示示例
在这里插入图片描述

第一步：熟悉这几个api 功能点

wx.getPrivacySetting 查询微信有待同意的隐私政策信息（需要微信开发这工具基础库 2.32.3）不然会报错

wx.openPrivacyContract 主动查询隐私授权同步状态以及展示隐私协议

按钮 button 配置 open-type=“agreePrivacyAuthorization” 同意隐私协议按钮配置，如果有其他的逻辑可以在 handleAgreePrivacyAuthorization函数里继续操作

第二步：写一个隐私协议弹框组件

wx.openPrivacyContract 是用户点击文本之后，跳到当前小程序后台设置隐私详情
（仅线上环境能看到）
button里设置 open-type=“agreePrivacyAuthorization” 只要点击了就表示同意隐私协议了

<template>
  <div class="subPage" v-if="visible">
    <div class="privacyPopup">
      <div class="title">
        <div>你的小程序名称</div>
      </div>

      <div class="content_pri">
        <text>感谢您信任并使用我们的小程序小程序！我们依据最新的法律要求，更新了</text>
        <text style="color: #FC6732 " @click="goToPrivacy">{{ privacyContractName }}</text>
        <text>特向你推送本提示</text>
      </div>
      <text class="tipsText">
        {{ tipsText }}
      </text>
      <div class="pri_btn">
        <button class="confuse_btn" @click="exitApplet">拒绝
        </button>
        <button class="confirm_btn" id="agree-btn" open-type="agreePrivacyAuthorization"
          @agreeprivacyauthorization="handleAgreePrivacyAuthorization">同意</button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    privacyContractName: String
  },
  data() {
    return {
      visible: true,
      tipsText: "1、您在使用我们的产品或服务时，将会提供与具体功能相关的个人信息(可能涉及账号、位置、交易等信息)\n 2、您可以对上述信息进行访问、更正、删除以及撤销同意等。\n 3、未经您的再次同意，我们不会将上述信息用于您未授权的其他用途或目的\n 4、您点击“同意”视为您已阅读并同意。"
    }
  },
  methods: {
    // 打开隐私协议
    goToPrivacy() {
      wx.openPrivacyContract({
        success: () => {
          console.log('打开成功');
        }, // 打开成功
        fail: () => {
          uni.showToast({
            title: '打开失败，稍后重试',
            icon: 'none'
          })
        } // 打开失败
      })
    },
    // 退出小程序
    exitApplet() {
      wx.exitMiniProgram({
        success: function () {
          console.log('退出成功')
        }
      })
    
     },
    // 同意
    handleAgreePrivacyAuthorization() {
       this.visible=false

  }
}

</script>

<style lang="less" scoped>
.title {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 32rpx 0;
  font-size: 38rpx;
  font-weight: 600;
}
.pri_btn {
  width: 100%;
  height: 158rpx;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  .confirm_btn {
    background: #FC6732;
    color: white;
    font-size: 32rpx;
    border-radius: 60rpx 60rpx 60rpx 60rpx;
    padding: 0px  64rpx;
  }
  .confuse_btn {
    border-radius: 60rpx 60rpx 60rpx 60rpx;
    position: relative;
    padding: 32rpx;
    color: #1B1C33;
    font-size: 32rpx;
    padding: 0px  64rpx;
    border: 1rpx solid #D7D7DB;
    .exit{
      left: 0;
      top: 0;
      background: red;
      position: absolute;
      opacity: 0.01;
      width: 200rpx;
      height: 84rpx;
    }
  }
}
.tipsText {
  white-space: pre-line;
  color: #1B1C33;
  font-size: 28rpx;
}
</style>

第三步：调用弹框

testPriivacy 为第二步的文件，我们把它当做组件进行引入，privacyContractName为你的小程序隐私协议的名称
wx.getPrivacySetting获取是否需要授权和隐私名称，如果返回为true 那我们就通过
this.$refs.testPriivacy 是把隐私弹框打开

<!-- template 内容-->
  <testPriivacy  ref='showPriivacy'  :privacyContractName="privacyContractName"></testPriivacy  >

// 调用检测权限方法
onShow(){
		this.obtainPermissions()
}

// 调用的方法  在methods里
methods:{
    obtainPermissions() {
      wx.getPrivacySetting({
        success: res => {
          console.log(res) // 返回结果为: res = { needAuthorization: true/false, privacyContractName: '《xxx隐私保护指引》' }
          // 隐私弹框
          if (res.needAuthorization) { 
            console.log('触发隐私弹框',res.privacyContractName)
            this.privacyContractName = res.privacyContractName
            this.$refs.testPriivacy .visible = true
          }
           this.privacyContractName = res.privacyContractName
        },
        fail: () => { },
        complete: () => { }
      })
    },
   }