微信小程序官方发布了一个用户隐私保护指引填写说明

菏泽炫佑科技 菏泽炫佑小程序开发 菏泽炫佑app制作 炫佑科技

微信小程序官方发布了一个用户隐私保护指引填写说明

估计是有一些强制性的政策要求。 微信本身就匆忙发布了**个版本，然后才考虑如何实现。 然后各种问题就没有出乎意料的出现了。 终于在2023年8月22日，发布了可以正常访问和调试的版本。 。

开发社区中很多人都在抱怨这件事。 按照目前的实现方式微信小程序开发前景，微信可以在其框架层自行实现。 它必须让开发创建一个弹出窗口，然后调整其界面来通知它。

投诉归投诉，代码还是要改的，毕竟9月15号之后再不改的话，相关功能就死了！ 时间紧、任务重。 我们直接进入正题吧。

准备

具体步骤可以参考官方的开发文档微信小程序官方发布了一个用户隐私保护指引填写说明，其中还包括官方的demo文件。

原生小程序适配代码

直接参考官方给出的demo3和demo4综合修改版本，通过组件引用，所有相关处理逻辑都放在组件内部，其他涉及隐私接口的页面只需要在wxml中引用即可，其他任何操作都不需要根据需要，所有内容都已在组件内部进行了处理。

如果网络上有其他人分享，则需要检查页面是否有授权。 您不需要使用以下代码。 只要页面上需要隐私授权，组件引入后，当用户触发隐私界面时，就会自动弹出这个隐私授权。 弹出窗口。

长话短说，您总共只需要执行 2 个步骤：

创建一个新组件：.wxml、.wxss、.js、.json。 完整代码如下，介绍页面上涉及隐私接口的组件。 如果使用的页面较多，可以直接在app.json文件中全局引入。

.wxml

  
  
    
      用户隐私保护提示
      感谢您使用本小程序，在使用前您应当阅读井同意《用户隐私保护指引》，当点击同意并继续时，即表示您已理解并同意该条款内容，该条款将对您产生法律约束力；如您不同意，将无法继续使用小程序相关功能。
      
        不同意
        同意并继续
      
    
  

.wxss

.privacy-mask {
  position: fixed;
  z-index: 5000;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.2);
}
.privacy-dialog-wrap {
  position: fixed;
  z-index: 5000;
  top: 16px;
  bottom: 16px;
  left: 80rpx;
  right: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.privacy-dialog {
  background-color: #fff;
  border-radius: 32rpx;
}
.privacy-dialog-header {
  padding: 60rpx 40rpx 30rpx;
  font-weight: 700;
  font-size: 36rpx;
  text-align: center;
}
.privacy-dialog-content {
  font-size: 30rpx;
  color: #555;
  line-height: 2;
  text-align: left;
  padding: 0 40rpx;
}
.privacy-dialog-content .privacy-link {
  color: #2f80ed;
}
.privacy-dialog-footer {
  display: flex;
  padding: 20rpx 40rpx 60rpx;
}
.privacy-dialog-footer .btn {
  color: #FFF;
  font-size: 30rpx;
  font-weight: 500;
  line-height: 100rpx;
  text-align: center;
  height: 100rpx;
  border-radius: 20rpx;
  border: none;
  background: #07c160;
  flex: 1;
  margin-left: 30rpx;
  justify-content: center;
}
.privacy-dialog-footer .btn::after {
  border: none;
}
.privacy-dialog-footer .btn-disagree {
  color: #07c160;
  background: #f2f2f2;
  margin-left: 0;
}

.js

let privacyHandler
let privacyResolves = new Set()
let closeOtherPagePopUpHooks = new Set()
if (wx.onNeedPrivacyAuthorization) {
  wx.onNeedPrivacyAuthorization(resolve => {
    if (typeof privacyHandler === 'function') {
      privacyHandler(resolve)
    }
  })
}
const closeOtherPagePopUp = (closePopUp) => {
  closeOtherPagePopUpHooks.forEach(hook => {
    if (closePopUp !== hook) {
      hook()
    }
  })
}
Component({
  data: {
    innerShow: false,
  },
  lifetimes: {
    attached: function() {
      const closePopUp = () => {
        this.disPopUp()
      }
      privacyHandler = resolve => {
        privacyResolves.add(resolve)
        this.popUp()
        // 额外逻辑：当前页面的隐私弹窗弹起的时候，关掉其他页面的隐私弹窗
        closeOtherPagePopUp(closePopUp)
      }
      closeOtherPagePopUpHooks.add(closePopUp)
      this.closePopUp = closePopUp
    },
    detached: function() {
      closeOtherPagePopUpHooks.delete(this.closePopUp)
    }
  },
  pageLifetimes: {
    show: function() {
      this.curPageShow()
    }
  },
  methods: {
    handleAgree(e) {
      this.disPopUp()
      privacyResolves.forEach(resolve => {
        resolve({
          event: 'agree',
          buttonId: 'agree-btn'
        })
      })
      privacyResolves.clear()
    },
    handleDisagree(e) {
      this.disPopUp()
      privacyResolves.forEach(resolve => {
        resolve({
          event: 'disagree',
        })
      })
      privacyResolves.clear()
    },
    popUp() {
      if (this.data.innerShow === false) {
        this.setData({
          innerShow: true
        })
      }
    },
    disPopUp() {
      if (this.data.innerShow === true) {
        this.setData({
          innerShow: false
        })
      }
    },
    openPrivacyContract() {
      wx.openPrivacyContract({
        success: res => {
          console.log('openPrivacyContract success')
        },
        fail: res => {
          console.error('openPrivacyContract fail', res)
        }
      })
    },
    curPageShow() {
      if (this.closePopUp) {
        privacyHandler = resolve => {
          privacyResolves.add(resolve)
          this.popUp()
          // 额外逻辑：当前页面的隐私弹窗弹起的时候，关掉其他页面的隐私弹窗
          closeOtherPagePopUp(this.closePopUp)
        }
      }
    }
  }
})

.json

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

版本

该版本也可以直接使用上面的代码。 新创建的组件放置在微信小程序对应的目录下。 在这个目录下，可以直接放置微信小程序的原生组件代码，因为目前只有微信小程序有这个东西，后续会添加。 它随时可能发生变化，所以没有必要将其封装成vue组件。

当页面引用该组件时，直接使用条件编译来引用它：

{
  // #ifdef MP-WEIXIN
  "usingComponents": {
    "privacy": "/wxcomponents/privacy/privacy"
  }
  // #endif
}

在vue页面中使用组件时，还必须使用条件编译：

注意，官方还没有适配微信。 目前，将此设置放在page.json文件中开发和调试是无效的。 它必须放在 .json 文件的 mp- 下：

{
  "name" : "uni-plus",
  "appid" : "__UNI__3C6F1BF",
  "mp-weixin" : {
    "appid" : "wx123456789",
    "__usePrivacyCheck__" : true
  }
}

炫佑科技专注互联网开发小程序开发-app开发-软件开发-网站制作等