Adapt Mini Program Privacy Protection Guidelines Settings

Since the mini program released an announcement, the next step is how to change the simple question. After all, I don’t want to make major changes to the historical code. Just adapt the privacy policy as simply as possible.

The overall idea is also based on the common practice of now asking users to agree to the privacy policy upon startup. If they disagree, they will not be allowed to use it. Only after they agree can they continue to use it.

Announcement content
reference document

the whole idea

The overall idea is as follows:

  1. Check whether it has been read in app.js;
  2. If you haven’t read it, jump directly to the privacy policy page (the privacy policy page has custom navigation and no return button. In order to prevent Android from sliding out from the side, check it in onUnLoad. If you don’t agree, jump to the privacy policy side) ;
  3. If you click OK, you will exit the page and continue the normal process;
  4. If you click Reject, a prompt will pop up indicating that you are unsure and cannot continue to use it.

To do this, you only need to add a privacy page, and then jump into this page in app.js to adapt the privacy policy.

The effect is as follows:

Insert image description here

Detailed implementation

app.js content

Add a function to detect privacy in app.js:

checkPrivacy() {
    
    
  if (!wx.canIUse('getPrivacySetting')) {
    
    
    return
  }
  wx.getPrivacySetting({
    
    
    success: res => {
    
    
        console.log("是否需要授权:", res.needAuthorization, "隐私协议的名称为:", res.privacyContractName)
        if (res.needAuthorization) {
    
    
          wx.navigateTo({
    
    
            url: `/pages/privacy`,
          })
          // wx.reLaunch({
    
    
          //   url: '/pages/privacy',
          // })
        } 
    },
    fail: () => {
    
     },
    complete: () => {
    
     },
  })
}

Call it in onLaunch of App

setTimeout(() => {
    
    
  this.checkPrivacy()
}, 500);

privacy page content

privacy.js content

// pages/privacy.js
Page({
    
    
  isAgree: false,
  resolvePrivacyAuthorization: null,
  onLoad(options) {
    
    
    console.log('onload ', options)
    wx.onNeedPrivacyAuthorization(resolve => {
    
    
      console.log('onNeedPrivacyAuthorization ', resolve)
      this.resolvePrivacyAuthorization = resolve
    })
    wx.requirePrivacyAuthorize()
  },
  onUnload() {
    
    
    if (!this.isAgree) {
    
    
      console.log('not agree')
      wx.navigateTo({
    
    
        url: `/pages/privacy`,
      })
    }
  },
  handleDisagree: function(event) {
    
    
    console.log('handleDisagree')

    this.resolvePrivacyAuthorization({
    
     event: 'disagree' })

    wx.exitMiniProgram()
  },
  handleAgree: function(event) {
    
    
    console.log('handleAgree')
    this.resolvePrivacyAuthorization({
    
     buttonId: 'agree-btn', event: 'agree' })
    this.isAgree = true
    wx.navigateBack()
  },
  openPrivacyContract() {
    
    
    wx.openPrivacyContract({
    
    
      success: res => {
    
    
        console.log('openPrivacyContract success')
      },
      fail: res => {
    
    
        console.error('openPrivacyContract fail', res)
      }
    })
  }
})

privacy.json contents

{
    
    
  "navigationStyle": "custom",
  "usingComponents": {
    
    }
}

privacy.wxml contents

<!--pages/privacy.wxml-->
<view class="container">
  <view>用户隐私保护提示</view>
  <view>感谢您使用本游戏,您使用本游戏前应当阅井同意</view>
  <button class="goToPrivacy" bind:tap="openPrivacyContract">《用户隐私保护指引》</button>
  <view>当您点击同意并开始时用产品服务时,即表示你已理解并同息该条款内容,该条款将对您产生法律约束力。如您拒绝,将无法进入游戏。</view>

  <button id="disagree-btn"
    style="margin-top: 30rpx;"
    type="default"
    class="weui-btn"
    bindtap="handleDisagree"
  >不同意并退出</button>
  <button id="agree-btn"
    type="default"
    open-type="agreePrivacyAuthorization"
    class="weui-btn"
    bindagreeprivacyauthorization="handleAgree"
  >同意并继续</button>
</view>

privacy.wxss Contents

/* pages/privacy.wxss */

.container {
    
    
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 220rpx 40rpx;
}

.goToPrivacy {
    
    
  width: 670rpx !important;
  margin: 20rpx 0;
  font-size: 28rpx;
}

Guess you like

Origin blog.csdn.net/xo19882011/article/details/132489128