评论

关于新版隐私协议接口wx.onNeedPrivacyAuthorization的解读以及实现代码(二)

关于新版隐私协议接口wx.onNeedPrivacyAuthorization的解读以及实现代码(二),添加了针对昵称输入框input的type="nickname"的代码

官方公告地址:

https://developers.weixin.qq.com/community/develop/doc/00042e3ef54940ce8520e38db61801

目前,开发工具或者体验版的小程序,调试基础库改成3.0.0可以适配测试,线上版本9月15日之后生效,所以这之前需要尽快改完,发布一版,否则到了9月15号之后 线上就会生效报错了。


这是官方的Demo地址,也是每个页引用一个全局的组件,个人感觉太过于繁琐了,可以参考以下我整理的代码。

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


其实改起来也很简单,以下是实现步骤和代码:

1、首先看一下这个网址,里边包含涉及到的隐私的接口,这些接口都要适配一下

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

在以上接口用到的页面,需要画一下类似上边的弹窗(这个弹窗可以全局定义个组件,方便多个页面共用),然后里边蓝字可以点击后调用wx.openPrivacyContract(Object object)接口即可,会自动跳转打开隐私协议页面。

拒绝按钮可以加一个点击事件,然后在事件里这样写,官方demo里也没有加id。

<button class="btn-refuse" catch:tap="clickRefuse">拒绝</button>
refuse() {
    this.resolvePrivacyAuthorization({
      event: 'disagree'
    })
  },


同意按钮比较特殊,布局需要用button这样写,记得给button加一个Id

<button id="agree-btn" class="btn-agree" open-type="agreePrivacyAuthorization"
 bindagreeprivacyauthorization="handleAgreePrivacyAuthorization">同意</button>


然后在handleAgreePrivacyAuthorization里就可以获取到点击事件,这样写

handleAgreePrivacyAuthorization() {
    this.resolvePrivacyAuthorization({
      buttonId'agree-btn',
      event'agree'
    })
  },


2、然后每个有隐私接口的页面引用自己的组件,代码如下

{
  "usingComponents": {
    "agreement""/components/agreement/agreement"
  }
}


布局引用

<!-- 隐私授权弹窗 -->
<agreement id="agreement" frameTitle="温馨提示" bind:refuse="refuse" bind:agree="agree"></agreement>


让组件弹窗显示,这样写: this.selectComponent('#agreement').show();


3、最后需要在用到隐私接口的页面的onShow里加上以下监听代码,在这里边让自定义的隐私弹窗显示出来即可。

  onShow: function () {
    let that = this;
    if (wx.onNeedPrivacyAuthorization) {
      wx.onNeedPrivacyAuthorization(resolve => {
        this.selectComponent('#agreement').show();//这里是让组件弹窗显示
        this.resolvePrivacyAuthorization = resolve
      })
    }
    }


以上代码加上就可以了,如果业务逻辑用到了需要判断是否授权过,可以加上 wx.getPrivacySetting(Object object)去获取是否授权过,用不到可以不加这个判断。

//=======================以下是针对昵称输入框input的type="nickname"的代码===========================

注意:以下代码只是针对input另外加的,上边提到的代码也都要加上才能正常弹出弹窗

布局,在input的外层View加touch事件,然后加一个focus动态控制焦点。

<view catch:touchstart="handleTouchInput">
    <input type="nickname" class="text" bindinput="listenerContent" placeholder="输入名称" maxlength="10"
     value='{{name}}' focus="{{focus}}" />
</view>


然后,touch事件:

 handleTouchInput() {
    let that = this
    if (wx.getPrivacySetting) {
      wx.getPrivacySetting({//获取是否需要弹出
        successres => {
          if (res.needAuthorization) {
            wx.requirePrivacyAuthorize({//该接口请求隐私协议,会自动触发上边的wx.onNeedPrivacyAuthorization
              success() => {
                that.setData({
                  focustrue,
                })
              },
              fail() => {},
              complete() => {}
            })
          } else {
            that.setData({
              focustrue,
            })
          }
        },
        fail() => {},
        complete() => {}
      })
    } else {
      this.setData({
        focustrue
      })
    }
  },


这样就可以了,记得把上边提到的监听代码都加上。

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

37 个评论

  • 在
    2023-08-24

    大佬 在做之前看到过你之前的一篇文章, 微信官方在22号更新了, 官网建议在使用相关隐私协议的页面引用组件, 有没有可能组件全局引入, 组件内监听是否需要弹出

    2023-08-24
    赞同
    回复 2
    • momo
      momo
      2023-08-24
      组件内监听是否需要弹出   是可行的。毕竟onNeedPrivacyAuthorization只有最后一次注册的才生效。
      2023-08-24
      回复
    • momo
      momo
      2023-08-24
      组件内监听,A页面->B页面,resolvePrivacyAuthorization可能会被替换,导致回到A时resolvePrivacyAuthorization是undefine。我直接放app.js里监听,resolvePrivacyAuthorization放globalData里,试了下可行
      2023-08-24
      回复
  • momo
    momo
    2023-08-24

    如第一个页面调用了getLocation谈了一次隐私窗,第二个页面调用了chooseMedia还得再谈一次隐私窗吗?

    2023-08-24
    赞同
    回复 4
    • momo
      momo
      2023-08-24
      如果getLocation用户没同意,第二个页面应该需要弹;
      如果getLocation用户同意了,第二个页面的chooseMedia需要弹隐私窗吗?
      2023-08-24
      回复
    • 一笑皆春
      一笑皆春
      2023-08-24
      需不需要弹不是咱控制的,是微信自己控制的,你只要加上监听代码就行,这样说能明白不?或者你主动调用接口判断需不需要弹
      2023-08-24
      回复
    • momo
      momo
      2023-08-24回复一笑皆春
      明白了,我刚已经把代码实现了,试了下知道流程了
      2023-08-24
      回复
    • 译文
      译文
      2023-08-30回复momo
      能实现吗?我的方法差不多,实现不了啊,请大神赐教
      2023-08-30
      回复
  • yflee
    yflee
    2023-08-24

    使用wx.onNeedPrivacyAuthorization和<button  open-type="agreePrivacyAuthorization" 的方式,用户拒绝的情况下,怎么阻止 “触发后续隐私api的调用并执行api的fail回调”  的行为?

    目前的情况是

    1、如果拒绝之后调用了this.resolvePrivacyAuthorization({ event: 'disagree'  }); 那么就会触发后续隐私api的调用,并且执行隐私api的fail回调;这样的话,wx.onNeedPrivacyAuthorization会持续监听,用户重复操作触发动作,也会继续校验;

    2、如果拒绝之后不调用 this.resolvePrivacyAuthorization({  event: 'disagree'  }); 那么就不会触发后续隐私api的调用,也就不会执行隐私api的fail回调;但是这样的话wx.onNeedPrivacyAuthorization就会中断监听,用户重复操作触发动作,就无法继续监听;


    2023-08-24
    赞同
    回复
  • 微喵网络
    微喵网络
    2023-08-24

    不能放onshow,要放在onload里

    2023-08-24
    赞同
    回复 1
    • 一笑皆春
      一笑皆春
      2023-08-24
      都测试过了没问题,相反放在onLoad里页面回退会不触发
      2023-08-24
      回复
  • 来去之间·王启年
    来去之间·王启年
    2023-08-24

    还有一个疑惑,wx.requirePrivacyAuthorize 和wx.getPrivacySetting 该用哪一个好?

    目前看起来wx.requirePrivacyAuthorize更方便同意过直接success,未同意的走fail

    wx.getPrivacySetting需要再判断一下success回调里面的needAuthorization

    想知道您的建议是使用哪一个?


    2023-08-24
    赞同
    回复 2
    • 珎邜
      珎邜
      2023-08-24
      +1,我也想知道用哪个比较好
      2023-08-24
      回复
    • 一笑皆春
      一笑皆春
      2023-08-24
      根据你业务逻辑来做,这些都不是必须的,只有this.resolvePrivacyAuthorization({
            buttonId: 'agree-btn',
            event: 'agree'
          })是必须的
      2023-08-24
      回复
  • xx
    xx
    2023-08-24
    onNeedPrivacyAuthorization 是在隐私协议弹框外面监听的  同意按钮是在隐私弹框里面 
    这个this.resolvePrivacyAuthorization 同意之后怎么拿到呢
    


    2023-08-24
    赞同
    回复 1
    • 在
      2023-08-24
      建议代码都写在隐私协议弹窗中
      2023-08-24
      1
      回复
  • 郭伟伟
    郭伟伟
    2023-08-23
    resolvePrivacyAuthorization这个函数在哪定义啊,如何定义呢,这么写报 not a function
    
    2023-08-23
    赞同
    回复 3
    • 珎邜
      珎邜
      2023-08-24
      请问你解决这个问题了吗
      2023-08-24
      回复
    • 在
      2023-08-24
      全局定义一个变量即可
      2023-08-24
      回复
    • 
      
      2023-09-04
      同问解决了吗
      2023-09-04
      回复

正在加载...

登录 后发表内容