微信小程序 用户隐私指引

创建 privacyPopup 组件

<view class="popup_bg" wx:if="{{show}}"></view>
<view class="popup" wx:if="{{show}}">

  <view class="content">
    <view class="text1">用户隐私保护提示</view>
    <view class="text2">感谢您使用本小程序,您使用本小程序前应当阅读并同意</view>
    <view class="text3" bind:tap="openPrivacyContract">{{obj.title?obj.title:'《用户隐私保护指引》' }}</view>
    <view class="text4">当您点击同意并开始使用产品服务时,即表示你已理解并同意改条款内容,该条款将对您产生法律约束力,如您拒绝,将无法使用小程序</view>
    <view class="commit">
      <button id="disagree-btn" class="mybotton" bindtap="handleDisagree">不同意并退出</button>
      <button id="agree-btn" class="mybotton"   open-type="agreePrivacyAuthorization" bindagreeprivacyauthorization="handleAgree">同意</button>
    </view>
    
  </view>
</view>
/* components/privacyPopup/index.wxss */
.popup_bg{
  position: fixed;
  top:0;
  width:100%;
  height:100%;
  background: #000000;
  opacity: 0.7;
  z-index: 999999999999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.popup{
  position: fixed;
  top:0;
  width:100%;
  height:100%;
  z-index: 999999999999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.content{
  width:600rpx;
  /* height:300px; */
  border-radius: 20rpx;
  background: #ffffff;
  padding:60rpx 40rpx;
  box-sizing: border-box;

}
.text1{
  color:rgba(0, 0, 0, 0.9);
  font-size: 30rpx;
}
.text2{
  margin:20rpx 0 ;
  font-size: 28rpx;
 color: rgba(0, 0, 0, 0.5);
}
.text3{
  margin:20rpx 0;
  font-size: 28rpx;
  color:blue;
}
.text4{  margin:20rpx 0; font-size: 28rpx;color: rgba(0, 0, 0, 0.5);}
.commit{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mybotton{
  padding:0;
  margin:0;
  width:250rpx;
  box-sizing: border-box;
  font-weight: 700;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-user-select: none;
  user-select: none;
  font-size: 34rpx;
}
.mybotton::after{
  border:none;
  background-color:rgba(0, 0, 0, 0.1);
  border-radius: 16rpx;
}
// components/privacyPopup/index.js
Component({

    /**
     * 组件的属性列表
     */
    properties: {
   
    },

    /**
     * 组件的初始数据
     */
    data: {
      show:false,
      obj:{},
    },

    /**
     * 组件的方法列表
     */
    methods: {
      //查看用户隐私保护指引
      openPrivacyContract(){
        wx.openPrivacyContract({
          success: res => {
            console.log('openPrivacyContract success')
          },
          fail: res => {
            console.error('openPrivacyContract fail', res)
          }
        })
      },
      //同意
      handleAgree(){
        this.setData({
          show:false,
        })
      },
      // 不同意并退出
      handleDisagree(){
wx.exitMiniProgram()
}
    },
    lifetimes:{
      attached:function(){
        let that = this;
        if (wx.getPrivacySetting) {
          wx.getPrivacySetting({
            success: res => {
                console.log("是否需要授权:", res.needAuthorization, "隐私协议的名称为:", res.privacyContractName)
                if (res.needAuthorization) {
                  that.setData({
                    show:true,
                    [`obj.title`]:res.privacyContractName
                  })
                } else{
                  that.setData({
                    show:false
                  })
                  this.triggerEvent("agree")
                }
            },
            fail: () => { },
            complete: () => { },
          })
        } else {
          // 低版本基础库不支持 wx.getPrivacySetting 接口,隐私接口可以直接调用
          this.triggerEvent("agree")
        }
      }
    }
})

直接在需要指引的页面 <privacy-popup></privacy-popup>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容