评论

关于新版隐私协议接口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
收藏
评论

38 个评论

  • flowerRed
    flowerRed
    2023-08-28

    我现在的代码 是权限在去对应功能页面之前就判断(用原来的一些方法和自定义弹窗)。修改后还是在跳转之前判断吗?还是在跳转到对应页面后也需要判断。

    2023-08-28
    赞同
    回复
  • 杨建坤
    杨建坤
    2023-08-28

    你好,我的理解是onNeedPrivacyAuthorization监听到获取到getPhoneNumber 事件后先弹出来自定义隐私协议框,然后用户点击接受按钮后才会弹出获取电话号码框,但是现在是自定义隐私框和获取电话号码框一块出来了,而且后者盖住了前者,该怎么解决啊

    2023-08-28
    赞同
    回复
  • 千羽
    千羽
    2023-08-28

    我想问一下,一个页面先后用到了两次获取隐私,先是获取位置,再是获取手机号,代码执行的先后顺序不一样;这种情况获取两次隐私的时候都会触发两次 ` wx.onNeedPrivacyAuthorization`监听吗?

    2023-08-28
    赞同
    回复
  • 秦时明月
    秦时明月
    2023-08-28

    如果登陆是弹窗且,里面有获取手机号按钮, 这样的话, 在tab页面中切换, 第一个页面,点击了 button,调用了手机号权限,弹出了自定义隐私协议弹窗;

    切换到 另一个tab页面中,此时点击 登陆弹窗中的,button,获取手机号,会提示 invoke getPhoneNumber too frequently

    像是 第一个button调用手机号,被隐私协议弹窗阻塞了,没法弹出 手机号授权 允许和拒绝的 系统弹窗,但是此时处于pending状态, 再去别的页面点击button,调用手机号授权,就好提示频繁调用了,官方也没给解决方案

    2023-08-28
    赞同
    回复
  • 莪の世界木有如
    莪の世界木有如
    2023-08-25

    为什么nickname不会触发onNeedPrivacyAuthorization这个监听呢?头像就可以触发

    2023-08-25
    赞同
    回复 3
    • 一笑皆春
      一笑皆春
      2023-08-25
      因为nickname需要单独处理呀,上边我也提到了
      2023-08-25
      回复
    • 莪の世界木有如
      莪の世界木有如
      2023-08-28回复一笑皆春
      剪切板相关apu是不是不会触发onNeedPrivacyAuthorization这个监听,我这边试了没反应
      2023-08-28
      回复
    • Dyfan
      Dyfan
      2023-08-31回复莪の世界木有如
      一样的问题,剪切板的触发不了
      2023-08-31
      回复
  • 姿势
    姿势
    2023-08-25

    已经被灰度的小程序 报错 getLocation access deined 是什么原因呢

    2023-08-25
    赞同
    回复
  • 珎邜
    珎邜
    2023-08-25

    你好,我想问下,就是我在点击获取用户信息的时候出现弹窗,第一次我拒绝授权,然后我又点击获取信息,点击同意,就会报错 this.resolvePrivacyAuthorization is not a function,如果我第一次点击获取信息就同意的话,就走得通,没问题,这是什么情况呀

    2023-08-25
    赞同
    回复 2
    • 一笑皆春
      一笑皆春
      2023-08-25
      可能还是代码逻辑写的有问题,我试了一下获取图片的接口没问题
      2023-08-25
      回复
    • NaN
      NaN
      2023-08-25
      你好,请问点击同意之后怎么关闭弹窗啊,报这个警告Component "components/privacy-dialog/privacy-dialog" does not have a method "handleAgreePrivacyAuthorization" to handle event "agreeprivacyauthorization".
      2023-08-25
      回复
  • 白two白
    白two白
    发表于移动端
    2023-08-24
    请问如果用户点了拒绝,那每次onshow都会弹窗,微信会认为违规吗。
    2023-08-24
    赞同
    回复 1
    • 一笑皆春
      一笑皆春
      2023-08-24
      你onShow里调用了啥隐私接口吗?为啥会一直弹窗?
      2023-08-24
      回复
  • 积玉
    积玉
    2023-08-24

    涉及页面过多,直接改到app.js里面了

    2023-08-24
    赞同
    回复 8
    • 一笑皆春
      一笑皆春
      2023-08-24
      我只是提供一种思路和代码,具体上边也说了弹窗可以封装个组件,每个页面引用就行了。然后处理逻辑可以按照官方的Demo,我觉得那个Demo对于多数人来说不太易懂,我上边代码是复制粘贴就行了也不复杂。何况哪有那么多页面用隐私接口呀。
      2023-08-24
      回复
    • 莪の世界木有如
      莪の世界木有如
      2023-08-25
      你多个页面是怎么实现弹窗的,每个页面都需要导入吗
      2023-08-25
      回复
    • nia
      nia
      2023-08-28
      请问写到app.js的话,如何引入自定义隐藏提示弹窗呢
      2023-08-28
      回复
    • 救赎
      救赎
      2023-08-29
      原生写的吗?怎么挂载的全局弹框组件
      2023-08-29
      回复
    • Jaky
      Jaky
      2023-08-29
      我觉得可以只把弹窗写在首页,然后首页每个有包含隐私接口的功能都加上弹窗函数,只要不同意协议,就不能进入此功能,而其他不需要隐私协议的功能就正常使用
      2023-08-29
      回复
    查看更多(3)
  • 悟
    2023-08-24

    <input  type="numberid="mobilename="mobileplaceholder="请输入手机号placeholder-style='color:#cccvalue=""/>

    我使用是这样的,不是官方的隐私接口,而且不是直接获取的是用户自己填写手机号的,像这样的隐私弹框官方没有说明情况哦,请问有解决办法吗?


    2023-08-24
    赞同
    回复 1
    • 一笑皆春
      一笑皆春
      2023-08-24
      这种自己输入的,应该不用管。。。或者保守点自己加个弹窗,用户同意了才输入,拒绝的话把输入框清空。。。
      2023-08-24
      回复

正在加载...

登录 后发表内容