【干货】小程序隐私保护指引设置的公告全面教程

这个世界并不会在乎你的自尊，只在乎你做出来的成绩，然后再去强调你的感受

小程序隐私保护指引设置的公告全面教程！为规范开发者的用户个人信息处理行为，保障用户的合法权益，自2023年9月15日起，对于涉及处理用户个人信息的小程序开发者，微信要求，仅当开发者主动向平台同步用户已阅读并同意了小程序的隐私保护指引等信息处理规则后，方可调用微信提供的隐私接口

隐私接口与对应的处理的信息关系如下：收集用户头像，昵称，位置信息，地址，发票，相册，手机号，剪切板，蓝牙等等

是否涉及隐私

1.到官网文档查询：

https://developers.weixin.qq.com/miniprogram/dev/framework/user-privacy/miniprogram-intro.html

2.小程序开发控制台

（在2023年9月15号之前，在 app.json 中配置 __usePrivacyCheck__: true 后，会启用隐私相关功能，如果不配置或者配置为 false 则不会启用）

学习

wx.onNeedPrivacyAuthorization：监听隐私接口需要用户授权事件

wx.getPrivacySetting:查询隐私授权情况

wx.openPrivacyContract:跳转至隐私协议页面

button:组件agreePrivacyAuthorization微信开放能力

思路

1.按钮点击触发某隐私接口先监听用户授权

2.触发查询隐私授权返回协议的名称

3.跳转至隐私协议页面

4.用户同意button组件通过开放能力告知平台

5.用户不同意返回上一级

预览

案例

在微信小程序后台设置一个“剪切板”的隐私

wxml页面

<!-- 弹窗 -->
<view class="privacy-bg" wx:if="{{showPrivacy}}"  catchtouchmove="true">
  <view class="privacy-view" animation="{{animationData}}">
    <view class="privacy-title">隐私保护指引</view>
    <view class="privacy-des">
      在使用当前小程序服务之前，请仔细阅读<text class="privacy-link" bind:tap="openPrivacyContract">{{privacyMsg.privacyContractName}}</text>。如你同意隐私保护指引，请点击“同意”开始使用
    </view>
    <button id="agree-btn" class="privac-btn" open-type="agreePrivacyAuthorization" bindagreeprivacyauthorization="handleAgreePrivacyAuthorization">同意</button>
    <view class="privac-no" bindtap="noPrivacy">拒绝</view>
  </view>
</view>    

<!-- 按钮事件 -->
<button bindtap="clipboardTap">点击获取剪切板</button>

js事件

// index.js
// 获取应用实例
const app = getApp()

Page({
  data: {
    // 弹窗
    showPrivacy: false,
    // 隐私信息
    privacyMsg: '',
    animationData: {},
  },

  onLoad() {

  },

  onShow() {
    // 隐私信息获取
    wx.getPrivacySetting({
      success: res => {
        console.log(res)
        this.setData({
          privacyMsg: res
        })
      },
    })
  },
  
  // 打开隐私界面
  openPrivacyContract() {
    wx.openPrivacyContract({
      success: () => {}, // 打开成功
      fail: () => {}, // 打开失败
      complete: () => {}
    })
  },

  // 不同意 返回上一页  
  noPrivacy() { 
    var selPage = getCurrentPages();
    console.log(selPage.length)
    if (selPage.length == 1) {
      wx.navigateTo({
        url: "../index/index"
      })
    } else {
      wx.navigateBack({
        delta: 1
      });
    }
  },
  
  // 点击获取剪切板
  clipboardTap() {
    wx.onNeedPrivacyAuthorization((resolve, eventInfo) => {
      console.log('触发本次事件的接口是：' + eventInfo.referrer)
      // 需要用户同意隐私授权时
      // 弹出开发者自定义的隐私授权弹窗
      this.setData({
        showPrivacy: true
      })
      this.resolvePrivacyAuthorization = resolve
    })

    wx.getClipboardData({
      success(res) {
        console.log(res.data)
      }
    })
  },

  // 同意隐私协议
  handleAgreePrivacyAuthorization() {
    this.setData({
      showPrivacy: false
    })
  },
})

wxss样式

.privacy-bg {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, .5);
  z-index: 9999999;
}

.privacy-view {
  position: absolute;
  animation: mymove 1s infinite;
  animation-iteration-count:1;
  animation-fill-mode: forwards;
  left: 50%;
  transform: translate(-50%, 0%);
  width: 85%;
  padding: 40rpx;
  background-color: #ffffff;
  border-radius: 40rpx;
}

.privacy-title {
  margin: 40rpx auto;
  text-align: center;
  font-size: 36rpx;
  font-weight: bold;
}

.privacy-des {
  color: #666;
  font-size: 26rpx;
}

.privacy-link {
  color: #07c160;
  line-height: 40rpx;
}

.privac-btn {
  background-color: black;
  color: #ffffff;
  width: 80% !important;
  border-radius: 100rpx;
  margin-top: 80rpx;
}

.privac-no {
  text-align: center;
  margin-top: 30rpx;
  color: #666;
  font-size: 26rpx;
}

@keyframes mymove{
  from{
    bottom: -20%;
  }
  to{
    bottom: 5%;
  }
}

案例

目前通过文档阅读，灵沐小程序为涉及用户隐私，星宿UI有涉及用户头像