小程序开发：在登录时弹窗用户使用协议

本次讲的是如何在用户打开小程序时候弹窗该小程序的使用协议，阅读确认后方可继续使用小程序。
这一点的意义在于：目前小程序对于各个开放接口的使用限制更严格，使用开放接口获取用户信息需要添加使用的用途说明，那我们正好可以使用这一个使用协议弹窗来说明该小程序都要干什么。
1、布局组成：弹窗放在template中，供login页面来调用；login页面中加载弹窗模板，使用isShow等属性来控制；JS中，在load函数中来控制弹窗显示==true。
2、模板构建：

<view catchtouchmove="catchtouchmove" class="tips" >
      <view class="tips_box">
          <view class="hint_view">
              <view class="text">
                  <view class="hint1">《小程序》使用协议</view>
                  <view class="hint2"><text>小程序使用协议小程序使用协议小程序使用协议小程序使用协议小程序使用协议...........等等</text></view>
              </view>
          </view>
          <button bindtap='tipAgree' class="login" type='primary' formType="submit" >我同意</button>
      </view>
  </view>

CSS:

.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.7);
}

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

.tips .tips_box .hint_view {
    display: flex;
    align-items: center;
}

.tips .tips_box .hint_view .text {
    display: flex;
    flex-direction: column;
    margin: 12rpx 24rpx;
}

.tips .tips_box .hint1 {
    margin-top: 38rpx;
    text-align: center;
    font-size: 30rpx;
    color: #1a1a1a;
    line-height:52rpx;
    border-bottom:1px solid;
}

.tips .tips_box .hint2 {
    margin-top: 14rpx;
    text-align: justify;
    text-indent:52rpx;
    font-size: 26rpx;
    color: #666;
    line-height:42rpx;
}

.tips .tips_box .login {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 32rpx 0 32px;
    width: 50%;
    line-height: 64rpx;
    border-radius: 80rpx;
    font-size: 32rpx;
    letter-spacing: 6rpx;
    color: #fff;
}
.isTipShow {
  display: block;
}

.isTipHide {
  display: none;
}

3、login页面调用：
在login底部来调用，放上引用的代码，{{isTipTrue?‘isTipShow’:‘isTipHide’}}这一个三目运算判断句是来控制显示还是不显示，调用使用include。CSS样式也可以引用过来：

<view class="payWay-container {{isTipTrue?'isTipShow':'isTipHide'}}">
  <include src="../../template/tips/tips"></include>
</view>

4、JS加载：

onLoad: function () {
    var that = this, time = e.formatTime(new Date());
    console.log("打开小程序的时间是：", time)
    that.setData({
      isTipTrue:true
    })
   }

点击确定后：

tipAgree:function(){
    this.setData({
      isTipTrue:false
    })
 }

如此，就完成一个简单的弹窗提示用户使用协议