评论

关于小程序隐私保护,用页面交互方式实现(onNeedPrivacyAuthorization)

小程序隐私保护,用页面交互方式实现

近期,关于小程序隐私保护改动,让很多人头疼

官方公告地址:https://developers.weixin.qq.com/community/develop/doc/00042e3ef54940ce8520e38db61801

官方提供的交互方式是弹窗的形式,对于业务比较复杂的小程序,如果是这种方式,改动就比较多了,每个涉及的页面都得声明一个弹窗组件,比较繁琐。

所以,我灵机一动,想了另一种交互方式,页面的方式,在全局入口用onNeedPrivacyAuthorization监听,只要没授权,就跳转到授权页面去,然后所有逻辑就在页面里面去处理了,这种方式也有问了微信官方的人,说是可以这样实现,交互方式开发者自行设计,具体可看https://developers.weixin.qq.com/community/develop/doc/000a08b7af80484707404d60c61c00

下面是具体的实现代码(代码是从uni-app转过来的,可能有点小问题,自行调整哈)

  1. 在app.js入口监听,当用户点击需要授权的操作时,判断没授权就跳到授权的页面去(把当前的resolve保存在全局resolvePrivacyAuthorization)
App({
  onLaunch (options) {
    if (wx.onNeedPrivacyAuthorization) {
     wx.onNeedPrivacyAuthorization(resolve => {
          this.globalData.resolvePrivacyAuthorization = resolve
       wx.navigateTo({
         url: '/pagesM/userPrivacyAuth/index'
       })
       console.log('需要隐私协议弹窗')
    })
   }
  },
  globalData: {
    resolvePrivacyAuthorization: null
  }
})

2. /pagesM/userPrivacyAuth/index页面

// wxml
<view class="privacy">
    <view class="privacy-content">
        <view class="privacy-content-title">隐私保护指引</view>
        <view class="privacy-content-desc">
            在使用当前小程序服务之前,请仔细阅读<text class="linkbindtap="openPrivacyContract">{{privacyContractName}}</text>。如你同意{{privacyContractName}},请点击“同意”开始使用。
        </view>
        <view class="privacy-footer">
            <button 
               class="privacy-footer-button reject-button"
               bindtap="handleDisagreePrivacyAuthorization">
               拒绝
            </button>
            <button
              class="privacy-footer-button agree-button"
              id="agree-btn"
              open-type="agreePrivacyAuthorization"
              bindagreeprivacyauthorization="handleAgreePrivacyAuthorization">
              同意
            </button>
        </view>
    </view>
</view>

// js
Page({
    data: {
        resolvePrivacyAuthorization: getApp().globalData.resolvePrivacyAuthorization,
        privacyContractName: '《隐私保护指引》'
    },
    onLoad() {
        wx.getPrivacySetting({
            success: res => {
                this.setData({
                    privacyContractName: res.privacyContractName
                })
            }
        })
    },
    // 打开隐私政策
    openPrivacyContract() {
        wx.openPrivacyContract({
            success: () => {},
            fail: () => {}
        })
    },
    disagreePrivacyAuthorizationFun() {
        if (typeof this.resolvePrivacyAuthorization === 'function') {
            this.resolvePrivacyAuthorization({
                event: 'disagree'
            })
            this.setData({
                handleDisagreePrivacyAuthorization: null
            })
        }
    },
    // 拒绝
    handleDisagreePrivacyAuthorization() {
        this.disagreePrivacyAuthorizationFun()
        wx.navigateBack()
    },
    // 同意
    handleAgreePrivacyAuthorization() {
        if (typeof this.resolvePrivacyAuthorization === 'function') {
            wx.showToast({
                title: '授权成功',
                icon: 'none'
            })
            setTimeout(() => {
                this.resolvePrivacyAuthorization({
                    buttonId: 'agree-btn',
                    event: 'agree'
                })
                this.setData({
                    handleDisagreePrivacyAuthorization: null
                })
                wx.navigateBack()
            }, 500)
        }
    },
    onUnload() {
        this.disagreePrivacyAuthorizationFun()
        getApp().globalData.resolvePrivacyAuthorization = null
    }
})

// wxss
.privacy-content {
  width: 100%;
  padding: 48rpx;
  box-sizing: border-box;
  background: #fff;
  border-radius: 16rpx;
  margin-top: 32rpx;
}
.privacy-content .privacy-content-title {
  text-align: center;
  color: #333;
  font-weight: bold;
  font-size: 32rpx;
}
.privacy-content .privacy-content-desc {
  font-size: 26rpx;
  color: #666;
  margin-top: 40rpx;
  text-align: justify;
  line-height: 1.6;
}
.privacy-content .privacy-content-desc > .link {
  color: #07c160;
  text-decoration: underline;
}
.privacy-footer  {
  margin-top: 48rpx;
  display: -webkit-flex;
  display: flex;
  justify-content: center;
}
.privacy-footer-button {
  width: 244rpx;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16rpx;
  box-sizing: border-box;
  border: none;
  margin: 0;
}
.privacy-footer-button::after {
  border: none;
}
.privacy-footer-button.reject-button {
  background: #f4f4f5;
  color: #909399;
  margin-right: 32rpx;
}
.privacy-footer-button.agree-button {
  background: #07c160;
  color: #fff;
}
最后一次编辑于  2023-08-30  
点赞 0
收藏
评论
登录 后发表内容