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

程序员何苦为难程序员

微信小程序又发布了新一波政策

就是获取头像昵称位置啥啥各种用户信息的时候都需要先搞个弹窗让用户确认才行
小程序用户隐私保护指引内容介绍

必须跟上啊咱公司的大佬马上搞了个组件

贴出来学习一下顺便给大家参考

javascript 复制代码

<!--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>

javascript 复制代码

/* 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;
}

javascript 复制代码

// 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()
          }
        }
      })
    },
  }
})

其实主要就是wx.getPrivacySetting 一下

wx.exitMiniProgram()表示不同意就退出小程序，可以根据需求自己调整哈

然后用的时候就每个页面引入一下

html页面

javascript 复制代码

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

json页面

javascript 复制代码

  "usingComponents": {
    "privacy": "components/privacy/privacy",
  },

最好是放到公共组件里面