记一次“小程序隐私保护指引设置”的开发实践与总结

开发实践

本次需求产生的前提条件

PS：官方Demo和相关函数调用目前已趋于稳定，虽然刚出来的时候有些不太好使~【换了N个测试机验证出来的😅】

交互流程思路梳理

本文以获取手机号事件为例，手机号可以平替为需要授权的其他API，具体参考：# 小程序用户隐私保护指引内容介绍【还是官方的，放心点~🙄】，之后就是一图胜千言了：思路有了，剩下的就是罗列关键函数来进行对应的开发了。关键函数和配置项整理：

函数/配置项名称	版本	作用
wx.requirePrivacyAuthorize(Object object)	基础库 2.32.3 开始支持，低版本需做兼容处理。	可用于模拟触发 onNeedPrivacyAuthorization 事件【实际已经用不到了😶】
wx.onNeedPrivacyAuthorization(function listener)	基础库 2.32.3 开始支持，低版本需做兼容处理。	意为用户触发了一个微信侧未记录过同意的隐私接口调用，开发者可通过响应该事件选择提示用户的时机
wx.openPrivacyContract(Object object)	基础库 2.32.3 开始支持，低版本需做兼容处理。	跳转隐私协议
wx.getPrivacySetting(Object object)	基础库 2.32.3 开始支持，低版本需做兼容处理。	查询隐私授权情况。隐私合规开发指南详情可见
usePrivacyCheck: true	以0915为时间节点	在 2023 年 9 月 15 号之前，在 app.json 中配置 `"__usePrivacyCheck__": true` 后，会启用隐私相关功能，如果不配置或者配置为 false 则不会启用

根据流程图、表格作用的描述，感觉一把梭，闭着眼都能写出来了~【然而并不是~😫】

业务驱动的产物

常规写法【以下仅为关键展示代码，已多次加工，请勿直接食用~🙅‍♂️】：

主动查询隐私授权同步状态以及展示隐私协议{简单，但是方案被否定了~✋}

html 复制代码

<!-- page.wxml -->
<view wx:if="{{showPrivacy}}">
  <view>想要让用户看到的内容---&%*#@(%@%@*(</view>
  <button bindtap="handleOpenPrivacyContract">点击看一下吧，万一有霸王条款呢~👦</button>
  <button id="agree-btn"
          open-type="agreePrivacyAuthorization"
          bindagreeprivacyauthorization="okBack">
      同意？还是不同意呢？🎈
  </button>
</view>

js 复制代码

// page.js
Page({
  data: {
    showPrivacy: false // 是否展示授权弹层
  },
  onLoad() {
    wx.getPrivacySetting({
      success: res => {
        console.log(res) // 返回结果为: res = { needAuthorization: true/false, privacyContractName: '《xxx隐私保护指引》' }
        if (res.needAuthorization) {
          // 需要弹出隐私协议
          this.setData({
            showPrivacy: true
          })
        } else {
          // 用户已经同意过隐私协议，所以不需要再弹出隐私协议，也能调用已声明过的隐私接口
        }
      },
      fail: () => {},
      complete: () => {}
    })
  },
  // 用户同意隐私协议事件回调【官方给了一个很长很长的名字-handleAgreePrivacyAuthorization】
  okBack() {//...},
})

被动监听隐私接口需要用户授权事件【应某产品扒拉扒拉的述求，采用的这种方案😇】

html 复制代码

// page.wxml
<view wx:if="{{showPrivacy}}">
  <view>想不到吧，和上面栗子的内容一样~🎃🎃🎃</view>
  <button
      id="agree-btn"
      open-type="agreePrivacyAuthorization"
      bindagreeprivacyauthorization="okBack">
      同意个der~[不会有看到吧~🎭]
  </button>
</view>

js 复制代码

// page.js
Page({
  data: {
    showPrivacy: false // 懒得写注释了，都看到这里了，不信你还不知道啥意思~
  },
  onLoad() {
    wx.onNeedPrivacyAuthorization((resolve, eventInfo) => {
      // onLoad的时候没打印，真的没打印~！🔍🔎[后面分析]
      console.log('触发本次事件的接口是：' + eventInfo.referrer)
      // 需要用户同意隐私授权时
      // 弹出开发者自定义的隐私授权弹窗
      this.setData({
        showPrivacy: true
      })
      this.resolvePrivacyAuthorization = resolve
    })
  },
  okBack() {
    // 用户点击同意按钮后
    this.resolvePrivacyAuthorization({ buttonId: 'agree-btn', event: 'agree' })
    // 用户点击同意后，开发者调用 resolve({ buttonId: 'agree-btn', event: 'agree' })  告知平台用户已经同意，参数传同意按钮的id
    // 用户点击拒绝后，开发者调用 resolve({ event:'disagree' }) 告知平台用户已经拒绝
  }
})

业务写法【就是填充、完善、加一堆指标🙄】：

进入小程序页面，首先判断版本，友好提示低版本用户进行升级
调用wx.getPrivacySetting ，判断用户是否授权，同时调用wx.onNeedPrivacyAuthorization(function listener)【其实没有调，仅为用户提前做了点菜的操作，什么时候上菜用户说了算，之后会细说~】
用户点击手机号授权按钮时【上菜！】
没授权---》代码控制开启授权弹层---》已授权---》自动拉起手机号弹层
之后再加入指标、配置等等【由于XX条例，此处省略1W个瓜籽儿...🙃】

PS：版本判断、每个调用时机和节点、对于wx.onNeedPrivacyAuthorization(function listener) 方法的理解【参看总结】等等都是要扣的细节。总体实现其他文章里都有可以用的现成代码，不过想不明白的话，是一件很难受的事情🤔。

总结

流程图是后画的，API是看了一遍又一遍才梳理清楚的
版本判断的API或方式不止一种，尝试了多次，采用的是官方demo的【此处仅山寨一下~✨】

js 复制代码

if (API存在) {
  // 放心大胆地用ta~
} else {
  // 提示语还是推荐用官方的，被询问时有据可查🤔~
  // 如果希望用户在最新版本的客户端上体验您的小程序，可以这样子提示
  wx.showModal({
    title: '提示',
    content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
  })
}

wx.onNeedPrivacyAuthorization(function listener) 这个方法是讨论了好多次，才有一个"清晰"的认知的【PS：欢迎留言交流~😀】

抽离全局的原生子组件完全是可以的，最终全局挂载，使用的页面仅引入一个标签就可以了【极简主义(能CV，绝不干多余的事儿)😶】~
当然还有好多其他细节问题，多看看文档就好了~【也可以评论区交流，肯定有大佬会的~😎】

彩蛋

无关紧要的一个点，可以从侧面校验小程序是否发版成功~🧐

getPhoneNumber等事件的e.detail.errMsg是不同的
授权协议时拒绝，或未授权提示：errMsg: "privacy permission is not authorized"
9月15日前授权拒绝时，提示：errMsg: "getPhoneNumber:fail user deny"

碎碎念🤕：

没有一蹴而就的成功，都是从陌生到熟悉。

有人选择了熟悉后再陌生，有人选择拍照留存这份熟悉~