小程序实现隐私权限政策提示

小程序实现隐私权限政策提示

本文主要讲在小程序中实现一下隐私权限的弹窗并进行相应操作的样式和功能

一、效果图

大概效果如下图所示：

在未同意时弹出该提示框，然后可以勾选同意或者点击不同意，同时可以跳转查看【用户协议】或【隐私政策】。
当你选择后将结果保存至本地。

二、代码

wxml

<view hidden="{{isAgree}}" class="mask">
  <view class="fixed_bottom" style="margin-bottom: 70rpx;">
    <view class="frame">
      <view><text class="title_privary">隐私权限政策提示</text></view>
      <view class="user_privary">
        <view>
          <checkbox value="cb" checked="{{isAgree}}" class="interestthreecheckbox" bind:tap="checkboxChange"/>
        </view>
        请您在使用前仔细阅读
        <text class="underline" bindtap="linkToServe">《用户协议》</text> 和 
        <text class="underline" bindtap="linkToPrivacy">《隐私政策》</text>
        的全部内容，请勾选上方同意按钮，开始使用我们的服务。
      </view>
      <view style="padding-top: 10px;">
        <button bindtap="checkAgree"
        style="height: 40px;width: 200px;color: white;background:{{agreeButColor}}">
          同意
        </button>
        <text class="underline" bindtap="isNotAgree" style="color: grey;">{{isNotAgree==true?'同意上述协议才可注册/登录哦~':'不同意'}}</text>
      </view>
    </view>
  </view>
</view>

js

Component({
  
    // =============== 初始数据
    data: {
      isCheck: false, // 默认未勾选
      isNotAgree: false, // 默认未勾选
      agreeButColor: 'grey',
      isAgree:false,
    },
    
    // =============== 组件属性
    properties: {

    },

    methods:{
      // 同意隐私协议改变状态
      checkboxChange: function() {
        this.setData({
          isCheck: !this.data.isCheck, // 点击时切换选中状态
          agreeButColor: this.data.agreeButColor=='grey' ? 'burlywood' : 'grey'
        });
      },

      // ================= 检验是否勾选
      checkAgree(){
        const isCheck = this.data.isCheck
        if (!isCheck) {
          wx.showToast({
            title: '请先同意用户协议',
            icon: 'none'
          });
        }else{
          this.setData({
            isAgree: true, // 点击时切换选中状态
          });
          // 同意后保存下
          getApp().setIsAgreePrivacy(true);
        }
      },

      // ================= 检验是否同意用户协议和隐私政策
      checkAgreeServeAndPrivacy(){
        const isAgree = this.data.isAgree
        if (!isAgree) {
          wx.showToast({
            title: '请先同意用户协议',
            icon: 'none'
          });
        }
        return isAgree;
      },

      isNotAgree(){
        if(this.data.isNotAgree===false){
          this.setData({
            isNotAgree: !this.data.isNotAgree // 点击时切换选中状态
          });
        }
      },

      // =============== 服务协议
      linkToServe(){
          wx.navigateTo({ url: '你的服务协议页面路径' })
      },


      // =============== 隐私政策
      linkToPrivacy(){
          wx.navigateTo({ url: '你的隐私权限页面路径' })
      },
    }
})

wxss

.welcome_content {
  padding-top: 120rpx;
  padding-left: 60rpx;
  padding-right: 60rpx;
  color: #fff;
}

.texts {
  color: #fff;
  font-size: 60rpx;
  margin: 50rpx 0 400rpx 50rpx;
}

.underline {
  border-bottom: 1rpx solid #fff;
  display: inline-block;
  color: burlywood;
}

.bottom {
  transition: all 0.5s linear;
}

.fixed_bottom {
  padding: 40rpx;
  text-align: center;
  transition: all 0.5s linear;
}

.serverCover {
  text-align: center;
  color: #fff;
  margin-top: 100rpx
}

.mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明遮罩层 */
}

.frame{
  top: 50%;
  left: 50%;
  height: 450rpx;
  width: 85%;
  position: fixed;
  transform: translate(-50%, -50%);
  padding: 15px;
  box-sizing: border-box;
  background-color: white;
  border: 5px;
  border-radius: 10px;
}

.title_privary{
  color: black;
  font-size: 13px;
}

.user_privary{
  justify-content: space-around;
  color: grey;
}

.interestthreecheckbox .wx-checkbox-input {
  border-radius: 50%;
  width: 45rpx;
  height: 45rpx;
}

app.js

getIsAgreePrivacy: function () {
  return wx.getStorageSync(FC_AGREE_PRIVACY);
},
setIsAgreePrivacy: function (key) {
  wx.setStorageSync(FC_AGREE_PRIVACY, key);
},

引用示例

<view wx:if="{{isAgreePrivacy!=true}}">
  <user-privacy id="userPrivacy"></user-privacy>
</view>

三、讲解

1.这里我是将代码封装成了conponent进行实现
2.getApp().setIsAgreePrivacy(true)是将同意的结果保存到本地，具体是在app.js进行wx.setStorageSync保存
3.引用方式直接通过组件名进行引用，并且通过getIsAgreePrivacy的值来控制是否进行显示，具体查看上方示例
4.一键三连