【微信小程序】最新隐私弹窗组件

程序员何苦为难程序员
微信小程序又发布了新一波政策
就是获取头像昵称位置啥啥各种用户信息的时候 都需要先搞个弹窗 让用户确认才行
小程序用户隐私保护指引内容介绍

必须跟上啊 咱公司的大佬马上搞了个组件
贴出来学习一下 顺便给大家参考

<!--components/privacy/privacy.wxml-->
<!-- 隐私弹窗 -->
<view class="privacy-box" wx:if="{{showPrivacy}}">
  <view class="privacy-inner">
    <view class="privacy-t1">隐私指引</view>
    <view class="privacy-t2">欢迎使用!使用小程序前请阅读：</view>
    <view class="privacy-t3" bind:tap="goRxx">《小程序隐私保护指引》</view>
    <view class="privacy-t2" style="margin-bottom: 60rpx;">当您点击同意并继续并开始使用小程序时，表示您已理解并同意该条款内容。如您拒绝，将无法继续使用小程序。</view>
    <button class="agree-btn" id="agree-btn" hover-class="none" open-type="agreePrivacyAuthorization" bindagreeprivacyauthorization="handleAgreePrivacyAuthorization">同意并继续</button>
    <view class="agree-btn nix" bind:tap="noAgger">不同意</view>
  </view>
</view>

<view style="position: absolute;left: 0;opacity: 0;pointer-events: none;">为了触发ready</view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

/* components/privacy/privacy.wxss */

.privacy-box {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
}

.privacy-inner {
  width: 100%;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: 0;
  background: #fff;
  box-sizing: border-box;
  border-radius: 10rpx;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  padding: 40rpx 40rpx 160rpx;
}

.agree-btn {
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100rpx;
  margin-bottom: 40rpx;
  font-size: 32rpx;
  width: 100% !important;
  border-radius: 10rpx;
  font-weight: bold;
  background: #0380FF;
}

.nix {
  color: #000;
  border: 1rpx solid rgb(185, 185, 185);
  background: rgb(236, 236, 236);
}

.privacy-t1 {
  font-size: 36rpx;
  color: #000;
  text-align: center;
  font-weight: bold;
  padding-bottom: 60rpx;
}

.privacy-t2 {
  font-size: 24rpx;
  color: #9b9b9b;
}

.privacy-t3 {
  font-size: 24rpx;
  color: #1280FF;
  padding: 30rpx 0;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

// components/privacy/privacy.js
Component({

  /**
   * 组件的属性列表
   */
  properties: {

  },
  pageLifetimes: {
    ready() {
      this.checkPrivacy()
    }
  },
  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {

    goRxx() {
      wx.openPrivacyContract({
        complete(res) { console.log('openPrivacyContract', res); }
      })
    },
    handleAgreePrivacyAuthorization() {
      this.setData({ showPrivacy: false })
      // 用户点击同意按钮后
      // this.resolvePrivacyAuthorization({ buttonId: 'agree-btn', event: 'agree' })
      // 用户点击同意后，开发者调用 resolve({ buttonId: 'agree-btn', event: 'agree' })  告知平台用户已经同意，参数传同意按钮的id
      // 用户点击拒绝后，开发者调用 resolve({ event:'disagree' }) 告知平台用户已经拒绝
    },
    noAgger() {
      wx.showToast({
        icon: 'none',
        title: '点击同意并继续才可以继续使用',
      })
      wx.exitMiniProgram()//退出小程序
    },
    checkPrivacy(call) {
      wx.getPrivacySetting({
        success: res => {
          console.log(res) // 返回结果为: res = { needAuthorization: true/false, privacyContractName: '《xxx隐私保护指引》' }
          if (res.needAuthorization) {

            // 需要弹出隐私协议
            this.setData({ showPrivacy: true })
          } else {
            call && call()
            // 用户已经同意过隐私协议，所以不需要再弹出隐私协议，也能调用已声明过的隐私接口
            // wx.getUserProfile()
            // wx.chooseMedia()
            // wx.getClipboardData()
            // wx.startRecord()
          }
        }
      })
    },
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

其实主要就是wx.getPrivacySetting 一下
wx.exitMiniProgram()表示不同意就退出小程序，可以根据需求自己调整哈
然后用的时候就每个页面引入一下

html页面

<!-- 隐私 -->
<privacy id="myprivacy"></privacy>
1
2

json页面

  "usingComponents": {
    "privacy": "components/privacy/privacy",
  },
1
2
3

最好是放到公共组件里面