微信小程序弹窗确认用户协议

用户首次进入微信小程序个人主页，弹窗确认用户已知晓并同意平台使用协议。

WXML文件代码

<!-- 以下代码放在文件的最外层，建议放在文末 -->
<view wx:if='{{userAgree==false}}'>
  <view catchtouchmove="catchtouchmove" class="tips">
    <view class="tips-box">
      <button bindtap='tipAgree' class="agree-button" type='primary'>同意协议</button>
      <view class="hint-view">
        <text>
          已阅读并同意
        </text>
        <view class="hint" bindtap='goToUserProtocol'>
          《白洞小程序使用协议》
        </view>
      </view>
    </view>
  </view>
</view>

WXSS文件代码

.tips {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
}

.tips-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 75%;
  height: auto;
  border-radius: 45rpx;
  background: #fff;
  overflow: hidden;
}

.agree-button {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 35rpx;
  width: 70%;
  line-height: 64rpx;
  border-radius: 30rpx;
  font-size: 40rpx;
  letter-spacing: 6rpx;
  color: #fff;
}

.hint-view {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hint-view text {
  margin-top: 5rpx;
  margin-bottom: 10rpx;
  font-size: 35rpx;
}

.hint {
  margin-top: 5rpx;
  margin-bottom: 40rpx;
  text-align: center;
  font-size: 35rpx;
  color: blue;
  line-height: 52rpx;
  border-bottom: 1px solid;
}

JS文件代码

// 记录用户同意协议的状态
var userAgree = false

Page({
  onLoad: function (options) {
    // 本地获取用户同意协议的状态
    var userAgree = wx.getStorageSync('userAgree') || false
    this.setData({
      userAgree: userAgree
    })
  },

  // 弹窗中设置跳转用户协议界面
  goToUserProtocol: function () {
    wx.navigateTo({
      url: '../aboutMe/protocol/protocol',
      success: res => {},
      fail: res => {},
      complete: res => {},
    })
  },

  //  同意用户协议
  tipAgree: function () {
    var that = this;
    var userAgree = true;
    wx.setStorageSync('userAgree', userAgree)
    that.setData({
      userAgree: userAgree
    })
  }
})

实现效果