微信小程序简单签到功能源码分享

简单的签到功能源码–运用了云数据库,基本上满足签到功能需求了

1-数据展示

微信小程序简单签到功能源码分享_第1张图片
微信小程序简单签到功能源码分享_第2张图片
微信小程序简单签到功能源码分享_第3张图片
微信小程序简单签到功能源码分享_第4张图片

2-数据库端

微信小程序简单签到功能源码分享_第5张图片

3-前端wxml部分:一个简单的签到

<button type="primary" bindtap="qianDao">签到button>

3-后端js部分:注意数据库名需要改,openid需要在app.js中onShow获取(你也可以换成其它字段查找)

const DB=wx.cloud.database().collection("test");
const db=wx.cloud.database().command;
Page({
  data: {
    isQd:"",//今天签到日
    oldQd:"",//上次签到
    signLength:0,//连续签到长度
    openid:"",//where判断需要
  },
  onShow: function(){
    var myDate = new Date();
    var isQd=myDate.getDate();//获取当前日(1-31)
    var openid=wx.getStorageSync("openid");//获取用户标识
    var signLength=wx.getStorageSync("signLength");//连续签到天数
    var oldQd=wx.getStorageSync("oldQd");//获取缓存中上次签到日期
    this.setData({
      isQd,
      oldQd,
      signLength,
      openid
    })
    //无论缓存有没有,如果上次签到日期不与当天的isQd相等的话,就从数据库拉取上次签到数据
    if(oldQd!=isQd){
      DB.where({_openid:this.data.openid}).get({
        success:(res)=>{
          this.setData({
            oldQd:res.data[0].isQd,//获取上次签到日期
            signLength:res.data[0].signLength//获取连续签到天数
          })
          //将连续签到日期存储到本地缓存
          wx.setStorageSync("signLength",res.data[0].signLength);
          wx.setStorageSync("oldQd", res.data[0].isQd);
        }
      })
    }
      // wx.setStorageSync("isQd",this.data.isQd);
  },
  //点击签到
  qianDao(){
    //显示加载中效果
    wx.showLoading({
      title: '签到中',
      mask:true
    });
    this.sign();
  },
  //签到过程
  sign(){
    var isQd=this.data.isQd;//当天签到日期
    var oldQd=this.data.oldQd;//上次签到日期
    if(isQd==oldQd){
      //一样表示今天已经签过了
      wx.showToast({
        title: '已经签到了,无需签到~',
        icon: 'none',
        duration: 1000,
        mask: true
      });
    }else{
      //不一样表示需要签到
      if(isQd-oldQd===1){
        //昨天签到了
          //修改数据库
        DB.where({_openid:this.data.openid}).update({
            data:{
              signLength:db.inc(1),//连续签到日期加1
              isQd:isQd//上次签到日期变为当天日期
            }
        })
          //修改缓存中的数据
        wx.setStorageSync("oldQd", isQd);
        wx.setStorageSync("signLength",this.data.signLength+1);
          //修改data中的数据
          this.onShow();
      }else{
        //昨天没有签到
          //修改数据库
          DB.where({_openid:this.data.openid}).update({
            data:{
              signLength:1,//连续签到日期加1
              isQd:isQd//上次签到日期变为当天日期
            }
        })
          //修改缓存中的数据
        wx.setStorageSync("oldQd", isQd);
        wx.setStorageSync("signLength",1);
          //修改data中的数据
          this.onShow();
        }
      //签到成功显示
      wx.showToast({
        title: '签到成功',
        icon: 'none',
        duration: 1000,
        mask: true
      });
    }
    //关闭加载显示框
    wx.hideLoading();
  }
});

编辑 | sishen
来源 | 前端兔
审核 | @前端兔

关注公众号查看更多前端知识分享~~
微信小程序简单签到功能源码分享_第6张图片

你可能感兴趣的:(小程序)