微信小程序|简单的签到功能（前端部分）

微信小程序部分

sign.wxml

<view class="container">

<view class="sign">
      <image class="image" src='../../images/sign.png'>image>
      
      <view class="sign_info">

        
        <view wx:if="{{signed==false}}" bindtap='sign'>点击此处签到view>
        <view wx:if="{{signed==true}}">今日已签到view>

        
        <view wx:if="{{day==true}}">已签到{{total_sign}}天view>
      view>

view>

view>

sign.wxss

page{
  background-color: #f6f6f6;
}
.container{
  height: 100%;
}
.image{
  float:left;
  width: 140rpx;
  height: 140rpx;
  margin-right:7%;
  margin-left:20%;
}
.sign{
  margin-top: 10vh;
  height:25vh;
}

.sign_info{
  font-size: large;
}

.date-string{
  margin-top: 20rpx;
  background-color: #fff;
  font-size: 28rpx;
  padding: 0 30rpx;
  line-height: 60rpx;
}

sign.js

// index.js
// 获取应用实例
const app = getApp()

Page({
  data: {
    motto: 'Hello World',
    userInfo: {},
  },

  onLoad: function(options){
        var that = this;

        //查询用户的签到状态
        wx.request({
        url:'后端地址',
        data:{
        transInfo:app.globalData.userInfo
        },
        method: "get",
        header: { 'content-type': 'application/x-www-form-urlencoded;charset=utf-8' },

        success: function (res) {
                //根据后端返回的数据，判断用户是否签到
                if (res.data == 1) {
                        that.setData({
                                signed: true,
                        })
                }
                else{
                        that.setData({
                                signed:false,
                        })
                }
        },
        })
  },

        //调用的签到函数
        sign:function(){
                var that = this;
                
                //向后端发送用户信息
                wx.request({
                url:'后端地址',
                data:{
                        transInfo:app.globalData.userInfo
                },
                method:'get',
                header: { 'content-type': 'application/x-www-form-urlencoded;charset=utf-8' },
                
                //从后端获取用户签到总天数
                success:function(res){
                        that.setData({
                                total_sign : res.data,
                                signed:true,
                                day:true,
                        })
                        console.log(app.globalData.times);
                        app.globalData.times = res.data;
                        console.log(app.globalData.times);
                        console.log(res.data);
                },
                fail:function(res){
                        console.log("fail");
                }
                })
        },

})