Published on

微信小程序隐私政策弹窗模板

标签:小程序

记录下工作中常用的原生小程序隐私政策弹窗文件模板

privacy.js

const app = getApp()
Component({
  /**
   * 组件的初始数据
   */
  data: {
    privacyContractName: '',
    showPrivacy: false,
    resolvePrivacyAuthorization: null
  },
  /**
   * 组件的生命周期
   */
  pageLifetimes: {
    show() {
      const _ = this
      // const version = wx.getAppBaseInfo().SDKVersion
      if (wx.onNeedPrivacyAuthorization) {
        wx.onNeedPrivacyAuthorization((resolve, eventInfo) => {
          console.log('触发本次事件的接口是:' + eventInfo.referrer)
          _.setData({
            resolvePrivacyAuthorization: resolve
          })
        });
      }
      if (wx.getPrivacySetting) {
        wx.getPrivacySetting({
          success(res) {
            console.log(res, 'res')
            if (res.errMsg == "getPrivacySetting:ok") {
              _.setData({
                privacyContractName: res.privacyContractName,
                showPrivacy: res.needAuthorization
              })
            }
          }
        })
      }
    }
  },
  /**
   * 组件的方法列表
   */
  methods: {
    // 打开隐私协议页面
    openPrivacyContract() {
      const _ = this
      wx.openPrivacyContract({
        fail: () => {
          wx.showToast({
            title: '遇到错误',
            icon: 'error'
          })
        }
      })
    },
    // 拒绝隐私协议
    exitMiniProgram() {
      wx.showToast({
        title: '必须同意后才可以继续使用当前小程序',
        icon: 'none'
      })
    },
    // 同意隐私协议
    handleAgreePrivacyAuthorization() {
      const {
        resolvePrivacyAuthorization
      } = this.data
      this.setData({
        showPrivacy: false
      }, () => {
        if (typeof resolvePrivacyAuthorization === 'function') {
          resolvePrivacyAuthorization({
            buttonId: 'agree-btn',
            event: 'agree',
          });
        }
      })
    },
    // 通过绑定空事件禁止滑动事件的穿透
    handleCatchtouchMove() {
      return
    }
  },
})

privacy.wxml

<view class="privacy" wx:if="{{showPrivacy}}" catchtouchmove="handleCatchtouchMove">
  <view class="content">
    <view class="title">用户隐私保护提示</view>
    <view class="des">
      感谢您使用本小程序,<br />
      您使用本小程序前应当阅读并同意,<br />
      <text class="link" bindtap="openPrivacyContract">
        《用户隐私保护指引》
      </text><br />当您点击同意并开始使用产品服务时,<br />即表示你已理解并同意该条款内容,<br />该条款内容将对您产生法律约束力,<br />如您拒绝,将无法进入小程序。<br />
    </view>
    <view class="btns">
      <button class="item reject" bindtap="exitMiniProgram">拒绝</button>
      <button id="agree-btn" class="item agree" open-type="agreePrivacyAuthorization" bindagreeprivacyauthorization="handleAgreePrivacyAuthorization">同意</button>
    </view>
  </view>
</view>

privacy.wxss

.privacy {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, .5);
  z-index: 9999999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.content {
  position: relative;
  width: 240px;
  padding: 48rpx;
  height: auto;
  background: #fff;
  border-radius: 16rpx;
}

.content .title {
  text-align: center;
  color: #333;
  font-weight: bold;
  font-size: 32rpx;
}

.content .des {
  font-size: 26rpx;
  color: #666;
  margin-top: 40rpx;
  /* text-align: justify; */
  line-height: 1.6;
  text-align: center;
}

.content .des .link {
  color: #07c160;
  /* text-decoration: underline; */
}

.btns {
  margin-top: 48rpx;
  margin-bottom: 12rpx;
  display: flex;
}

.btns .item {
  width: 200rpx;
  height: 72rpx;
  overflow: visible;
  display: flex;
  align-items: center;

  justify-content: center;
  /* border-radius: 16rpx; */
  box-sizing: border-box;
  border: none !important;
}

.btns .reject {
  background: #f4f4f5;
  color: #666;
  font-size: 14px;
  font-weight: 300;
  margin-right: 16rpx;
}

.btns .agree {
  width: 320rpx;
  background: #07c160;
  color: #fff;
  font-size: 16px;

}

privacy.json

{
  "component": true,
  "usingComponents": {}
}

如何使用

以在首页中使用为例 home-page.json

{
  "usingComponents": {
    "privacy": "/component/privacy/privacy"
  }
}

home-page.wxml

  <privacy />

app.json

  "__usePrivacyCheck__": true