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

程序员何苦为难程序员

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

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

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

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

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",
  },

最好是放到公共组件里面

相关推荐
春哥的研究所30 分钟前
AI人工智能名片小程序源码系统,名片小程序+分销商城+AI客服,包含完整搭建教程
人工智能·微信小程序·小程序
paopaokaka_luck1 小时前
智能推荐社交分享小程序(websocket即时通讯、协同过滤算法、时间衰减因子模型、热度得分算法)
数据库·vue.js·spring boot·后端·websocket·小程序
贝格前端工场2 小时前
小程序订阅消息设计:用户触达与隐私保护的平衡法则
大数据·小程序
weixin_lynhgworld2 小时前
盲盒一番赏小程序:用科技重新定义“未知的快乐”
科技·小程序
Bruce_Json3 小时前
微信小程序ts+sassjlin-ui
微信小程序·小程序·sass
来碗盐焗星球4 小时前
记一次微信小程序AI开发的血泪史
前端·微信小程序
说私域6 小时前
淘宝直播与开源链动2+1模式AI智能名片S2B2C商城小程序的融合发展研究
人工智能·小程序·开源
说私域9 小时前
互联网生态下赢家群体的崛起与“开源AI智能名片链动2+1模式S2B2C商城小程序“的赋能效应
人工智能·小程序·开源
The_era_achievs_hero16 小时前
微信小程序71~80
微信小程序·小程序
dssxyz17 小时前
uniapp打包微信小程序主包过大问题_uniapp 微信小程序时主包太大和vendor.js过大
javascript·微信小程序·uni-app