当前位置:   article > 正文

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

agreeprivacyauthorization

接入前须知

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

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>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
第三步:调用弹框

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: () => { }
      })
    },
   }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27

重点总结

1、做之前一定要检查 开发工具的基础库
在这里插入图片描述
2、在app.json里设置 “usePrivacyCheck”: true 打开隐私权限
在这里插入图片描述

3、发布小程序的时候 一定要勾选
在这里插入图片描述

4、上线后 微信版本不能太低

5、照片权限、位置权限、wx.login 等等都要点击隐私同意之后才会生效,所以 一定要在合适的位置 调 wx.getPrivacySetting 去查是否需要授权,及时的把隐私弹框弹出进行拦截

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/小小林熬夜学编程/article/detail/292287
推荐阅读
相关标签
  

闽ICP备14008679号