likes
comments
collection
share

uniapp和微信小程序隐私协议弹框

作者站长头像
站长
· 阅读数 81

主要是介绍了如何在uniapp项目和原生小程序项目中，添加“隐私协议”交互弹框，这个是微信官网新的要求

基础介绍

为了规范用户个人信息处理行为，微信官方需要我们在调用涉及到用户隐私功能时，先弹出一个“隐私弹框”，与用户进行交互，让用户同意才行。

具体可查看小程序隐私协议开发指南

当然，这个功能可以自己定义实现，选择触发显示时机

也可以等官方发布（2023/10/17），使用官方默认的弹框

PS：我是在必须适配的最后日期前，就做完功能，发布成功了；然后官方在截止时间前，才发布新通知，开发者可以无需修改，自动使用官方默认配置。这是加急做了一个无用功能，成了大冤种了。。。

uniapp 微信小程序添加隐私协议弹框

  1. 在 manifest.json 中添加__usePrivacyCheck__配置
{
  "mp-weixin": {
    "__usePrivacyCheck__": true
  }
}
  1. 新增一个 Privacy 组件，完成弹框和功能
<!-- privacy.vue -->
<template>
  <view class="privacy" v-if="showPrivacy">
    <view class="content">
      <view class="title">隐私保护指引</view>
      <view class="des">
        请您仔细阅读并充分理解<text
          class="link"
          @click="handleOpenPrivacyContract"
          >{{ privacyContractName }}</text
        >
        ，如您同意前述协议的全部内容，请点击“同意”开始使用。<text class="cancel"
          >如您不同意，将被限制使用部分功能，或将在您使用具体功能前再次询问以取得您的授权同意。</text
        >
      </view>
      <view class="btns">
        <button class="reject" @click="handleDisagree">拒绝</button>
        <button
          class="agree"
          open-type="agreePrivacyAuthorization"
          @agreeprivacyauthorization="handleAgreePrivacyAuthorization"
        >
          同意
        </button>
      </view>
    </view>
    <view
      class="iconfont icon-close"
      @click="handleDisagree"
    ></view>
  </view>
</template>

uniapp和微信小程序隐私协议弹框

（1）判断是否需要展示弹框

通过 wx.getPrivacySetting 来获取，返回结果为{ needAuthorization: true, privacyContractName: '《xxx 隐私保护指引》' }

包括是否需要展示的字段needAuthorization（注意：在微信模拟器中，返回的一直是 false；在真机上才会显示true，而且微信版本要大于2.32.3），以及隐私协议名称privacyContractName

注意：先通过 wx.getAppBaseInfo().SDKVersion获取版本号，判断是否大于 2.32.3

onPageShow() {
  wx.getPrivacySetting({
    success: (res) => {
      console.log("cj隐私配置", res);
      if (res.errMsg == "getPrivacySetting:ok") {
        this.privacyContractName = res.privacyContractName;
        this.showPrivacy = res.needAuthorization
      }
    },
  });
}

uniapp和微信小程序隐私协议弹框

（2）打开隐私协议页面

点击隐私协议名称时，可以打开指引页，展示具体的使用权限，供用户查看。

注意：这个页面不用我们做，开发者只需要调用官方接口wx.openPrivacyContract就行

handleOpenPrivacyContract() {
  wx.openPrivacyContract({
    fail: () => {}
  })
}

（3）不同意或者关闭事件：直接关闭弹框就行，等待之后进入再触发，知道用户同意为止。

官方规定：用户不同意时，不能禁止用户使用其他功能，所以不能直接关闭小程序。

handleDisagree() {
  this.showPrivacy = false;
}

（4）同意事件

在按钮上定义open-type="agreePrivacyAuthorization"，绑定事件@agreeprivacyauthorization就行。

同意成功后，也是关闭弹框，同上处理

  1. 在需要使用的页面中引入即可，我是在“我的”页面引入的，需要展示头像，使用了微信获取用户信息接口wx.getUserInfo，涉及到用户隐私

原生小程序添加隐私协议弹框

  1. 在 app.json 中开启__usePrivacyCheck__配置，设置为 true
{
  "__usePrivacyCheck__": true
}
  1. 新增一个 Privacy 组件，完成弹框样式
<!-- privacy.wxml -->
<view class="privacy" wx:if="{{showPrivacy}}">
  <view class="content">
    <view class="title">隐私保护指引</view>
    <view class="des">
      请您仔细阅读并充分理解
      <text class="link" bindtap="handleOpenPrivacyContract"
        >{{privacyContractName}}</text
      >
      ，如您同意前述协议的全部内容，请点击“同意”开始使用。
      <text class="cancel"
        >如您不同意，将被限制使用部分功能，或将在您使用具体功能前再次询问以取得您的授权同意。</text
      >
    </view>
    <view class="btns">
      <button class="reject" bindtap="handleDisagree">不同意</button>
      <button
        id="agree-btn"
        class="agree"
        open-type="agreePrivacyAuthorization"
        bindagreeprivacyauthorization="handleAgreePrivacyAuthorization"
      >
        同意
      </button>
    </view>
    <view
      class="iconfont icon-close"
      bindtap="handleDisagree"
    ></view>
  </view>
</view>

判断是否需要展示弹框

pageLifetimes: {
  show() {
    wx.getPrivacySetting({
      success(res) {
        console.log("cj隐私配置", res);
        if (res.errMsg == "getPrivacySetting:ok") {
          this.setData({
            showPrivacy: res.needAuthorization,
            privacyContractName: res.privacyContractName,
          });
        }
      },
    });
  }
}

其他的和uniapp的处理基本一样，参照上面uniapp处理就行