评论

通过 app.js + Proxy 实践新版隐私接口 wx.onNeedPrivacyAuthorization

通过 app.js + Proxy,以相对较小的改动,实践新版隐私接口 wx.onNeedPrivacyAuthorization

因小程序业务复杂,有30多个页面涉及隐私接口/组件,逐个适配工作量大,目前想到一个相对较小的改动方法,大体思路如下:

设置一个全局变量,用于控制自定义的隐私授权弹框组件;在小程序启动时,注册 onNeedPrivacyAuthorization 事件监听,在该事件回调中更改全局变量;在授权弹框组件内部,通过 Proxy 监听该全局变量做展示操作,涉及隐私接口/组件的页面仅添加该授权组件即可。

代码实现:

1、在 app.js 的 onShow 方法中,增加 wx.onNeedPrivacyAuthorization

App({

  // 全局变量
  global: {
    privacyProxy: null, // 隐私代理
    resolvePrivacyAuth: null // 回调函数
  },

  /**
   * 生命周期回调——监听小程序初始化
   */
  onLaunch() {

  },

  /**
   * 生命周期回调——监听小程序启动或切前台
   */
  onShow() {
    // 小程序启动开始监听
    this.listenPrivacyAuth(this)
  },
  
  /**
   * 注册 onNeedPrivacyAuthorization 事件监听
   * 当需要用户授权弹窗时会触发,可以通过调用resolve函数,对授权事件进行上报
   */
  listenPrivacyAuth(app) {
    if (wx.onNeedPrivacyAuthorization) {
      wx.onNeedPrivacyAuthorization(resolve => {
        // 需要用户同意隐私授权时
        // 弹出开发者自定义的隐私授权弹窗
        app.global.privacyProxy.show = true
        app.global.resolvePrivacyAuth = resolve
      })
    }
  }

})


2、自定义用户隐私授权弹框组件,组件增加隐私代理

const app = getApp()

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    // 组件是否展示
    show: {
      type: Boolean,
      value: false
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    i18nPrivacy: {
      title: '小程序隐私保护指引',
      msg1: '在你使用小程序服务之前,请仔细阅读',
      msg2: '《XXX小程序隐私保护指引》',
      msg3: '。如你同意《XXX小程序隐私保护指引》,请点击“同意开始使用小程序服务。',
      refuse: '拒绝',
      agree: '同意'
    }
  },

  lifetimes: {

    // 在组件实例进入页面节点树时执行
    attached () {
      this.initPrivacyProxy()
    }
  },

  // 以下是旧式的定义方式,可以保持对 <2.2.3 版本基础库的兼容
  attached () {
    // 在组件实例进入页面节点树时执行
    this.initPrivacyProxy()
  },
  
  /**
   * 组件的方法列表
   */
  methods: {

    /**
     * 初始化隐私代理
     */
    initPrivacyProxy () {
      const validator = {
        set: (obj, prop, value) => {
          if (prop === 'show' && value) {
            this.setData({
              show: true
            })
          }
          return true
        }
      }
      app.global.privacyProxy = new Proxy({}, validator)
    },

    /**
     * 关闭隐私保护指引弹框
     */
    closePrivacyAuth () {
      this.setData({
        show: false
      })
    },

    /**
     * 跳转至隐私协议页面
     */
    onOpenPrivacy () {
      wx.openPrivacyContract()
    },

    /**
     * 拒绝隐私保护指引
     */
    onRefusePrivacyAuth (e) {
      this.closePrivacyAuth()
      const { id } = e.currentTarget
      if (app.global.resolvePrivacyAuth) {
        app.global.resolvePrivacyAuth({ buttonId: id, event: 'disagree'  })
      }
    },

    /**
     * 同意隐私保护指引
     */
    onAgreePrivacyAuth (e) {
      this.closePrivacyAuth()
      const { id } = e.currentTarget
      if (app.global.resolvePrivacyAuth) {
        app.global.resolvePrivacyAuth({ buttonId: id, event: 'agree'  })
      }
    }

  }
})


3、在 app.json 中设置全局隐私组件,需要的页面增加组件

// app.json 
"usingComponents": {
  "privacy-auth": "/components/privacy-auth/privacy-auth"
}

// pages/index/index.wxml
<privacy-auth />


代码片段:

https://developers.weixin.qq.com/s/bPiyCxmN7zKp

最后一次编辑于  2023-08-17  
点赞 1
收藏
评论

2 个评论

  • -暮酒
    -暮酒
    2023-08-30

    写成页面的话可行吗?

    2023-08-30
    赞同
    回复 1
    • 夏落
      夏落
      2023-08-30
      可以的,不过弹框交互会好些
      2023-08-30
      回复
  • 琪哥
    琪哥
    2023-08-21

    以上demo,无法触发弹窗啊,加了隐私接口也不行。楼主辛苦完善下

    2023-08-21
    赞同
    回复 1
    • 夏落
      夏落
      2023-08-22
      因接口回退了,需等官方更新;你也可以设置定时器模拟改变那个全局变量来测试
      2023-08-22
      回复
登录 后发表内容