微信小程序隐私授权

微信开发者平台新公告：2023年9月15之后，隐私协议将被启用，所以以后的小程序都要加上隐私协议的内容提示用户，

首先设置好隐私协议的内容，登录小程序的开发者后台，在设置--》服务内容声明--》用户隐私保护指引，点击右侧的“更新”，可以在线编辑隐私协议内容，编辑完保存；

然后在代码中创建一个components文件夹，用来放自定义组件，在里面创建一个privacy组件，

组件里面的各个页面的代码：

privacy.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
          })
      },
  },
})

privacy.json：

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

privacy.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>

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 {
  width: 632rpx;
  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;
}

一般在首页（小程序第一个加载的页面）把这个隐私协议组件引入，例如index是我的首页，在index.json文件内引入这个组件：

{
    "navigationBarTitleText": "首页",
    "enablePullDownRefresh": false,
    "usingComponents": {
        "custom-tab-bar": "/components/custom-tab-bar/index",
        "Privacy": "/components/privacy/privacy"
    }
}

然后在index.wxml页面放这个组件就行了，可以放到任意位置：

<!--隐私协议-->
<Privacy />

这样第一次进入小程序的时候会出现一个弹窗，用户点击同意后就不会再出现了，除非主动删除了这个小程序，

在app.json页面加上"__usePrivacyCheck__": true，这样隐私协议就引入结束了。

上边的项目是在小程序内部的框架写的代码，后来有一个项目是用uniapp框架写的，打包成微信小程序后运行的，我在components 文件夹下新增了一个隐私协议的组件，打包后在小程序上没有任何隐私协议的内容出现，于是就放弃了在uniapp内添加隐私协议，先把uniapp项目打包成微信小程序（此时项目内没有隐私协议的任何内容），然后在微信开发者共工具上运行代码，在components文件夹下把上边的privacy文件夹复制粘贴过来，在登录页面引入了隐私组件"Privacy": "/components/privacy/privacy"

在页面内：

<!--隐私协议-->

<Privacy />

在app.json:

 "lazyCodeLoading": "requiredComponents",

  "__usePrivacyCheck__": true

上边那句是按需注入，上传代码的时候不写这句会警告提示，

然后保存代码，关闭开发工具再次打开，就能正常显示了。

在某个采集用户信息的页面底部可以加个链接跳转隐私协议内容，调用wx.openPrivacyContract这个小程序API直接打开，例如这种效果：

在页面添加代码：

<view class="go-yinsi" @click="openyinsi">《用户服务协议》及《隐私政策》</view>

methods:{
            //打开隐私协议内容
            openyinsi(){
                //#ifdef MP-WEIXIN
                wx.openPrivacyContract({
                  success: (e) => {
                      console.log("隐私协议打开成功e",e)
                  },
                  fail: (e) => {
                      console.log("隐私协议打开失败e",e)
                  }
                })
                //#endif
            },

}

样式：

.go-yinsi{
    font-size: 14px;
    color: #0f40f5;
    text-align: center;
    margin-top: 40px;
    margin-bottom: 0px;
}

这样可以直接打开隐私协议的内容。