微信小程序 - 隐私保护协议指引 组件封装

一. 在配置文件app.json文件中添加配置项  "__usePrivacyCheck__": true

在 app.json 中配置 __usePrivacyCheck__: true 后，会启用隐私相关功能，如果不配置或者配置为 false 则不会启用。

在 2023年10月17日之后，不论 app.json 中是否有配置 __usePrivacyCheck__，隐私相关功能都会启用。

二. 组件封装 

首先看一下组件样式(弹窗)

以下是组件代码

在pages文件下创建privacyModa文件夹

privacyModa.js文件

// component/privacy/privacy.js
Component({
  /**
   * 组件的初始数据
   */
  data: {
      privacyContractName: '',
      showPrivacy: false
  },
  /**
   * 组件的生命周期
   */
  pageLifetimes: {
      show() {
          const _ = this
          wx.getPrivacySetting({
              success(res) {
                  if (res.needAuthorization) {
                      _.setData({
                          privacyContractName: res.privacyContractName,
                          showPrivacy: true
                      })
                  }
              }
          })
      }
  },
  /**
   * 组件的方法列表
   */
  methods: {
      // 打开隐私协议页面
      openPrivacyContract() {
          const _ = this
          wx.openPrivacyContract({
              fail: () => {
                  wx.showToast({
                      title: '遇到错误',
                      icon: 'error'
                  })
              }
          })
      },
      // 拒绝隐私协议
      exitMiniProgram() {
          // 直接退出小程序
          wx.exitMiniProgram()
      },
      // 同意隐私协议
      handleAgreePrivacyAuthorization() {
          const _ = this
          _.setData({
              showPrivacy: false
          })
      },
  },
})

privacyModa.json文件

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

privacyModa.wxml文件

<view class="privacy" wx:if="{{showPrivacy}}">
    <view class="content">
        <view class="title">隐私保护指引</view>
        <view class="des">
            在使用当前小程序服务之前，请仔细阅读<text class="link" bind:tap="openPrivacyContract">{{privacyContractName}}</text>。为了完整体验，请您点击“同意”开始使用。
        </view>
        <view class="btns">
            <button class="item reject" bind:tap="exitMiniProgram">拒绝</button>
            <button id="agree-btn" class="item agree" open-type="agreePrivacyAuthorization" bindagreeprivacyauthorization="handleAgreePrivacyAuthorization">同意</button>
        </view>
    </view>
</view>

privacyModa.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 {
  width: 605rpx;
  padding: 48rpx;
  box-sizing: border-box;
  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;
}
 
.content .des .link {
  color: #07c160;
  text-decoration: underline;
}
 
.btns {
  margin-top: 48rpx;
  display: flex;
}
 
.btns .item {
  justify-content: space-between;
  width: 244rpx;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16rpx;
  box-sizing: border-box;
  border: none;
}
 
.btns .reject {
  background: #f4f4f5;
  color: #909399;
}
 
.btns .agree {
  background: #07c160;
  color: #fff;
}

三. 组件调用

在登录页(login)调用隐私保护指引组件

在login.json文件中声明组件

{
    "usingComponents": {
      "privacy": "../privacyModa/privacyModa"
    }
}

在login.wxml文件中引用组件

// 其他代码....


// 引用说明组件
<privacy />