从零开始制作一款打卡类小程序

这学期受某人所托，给学院做了一款打卡小程序。其效果如下：

一个类似论坛的社区，可发帖、评论、回复。    
打卡可换算积分，一天只能打卡一次，且有今日打卡排行榜实时展示。   
跑步也可换算积分，换算的规则男女有别。   

在这里插入图片描述 在这里插入图片描述 image
这个小程序的上线成本比较高，需要营业执照，还有因为论坛的存在，上线之后还需要工信部的备案资质，否则不予更新代码，所以我已经停止对它的维护了。开源这个项目的代码： github地址,欢迎star、fork!!!

今天我主要讲述其中的打卡部分的制作,为了后期维护，我已经单独把这部分做成一个小程序，欢迎体验。

<center><img src="https://img-blog.csdnimg.cn/20181130142609373.jpg"></img></center>

在这里插入图片描述

核心代码

talk is cheap,show the code.

核心代码

punch.js

var app = getApp();
var date;
var allowlog = 1;
var Bmob = require('../../utils/bmob.js');
Page({
 
  /**
   * 页面的初始数据
   */
  data: {
   newList: [],
  },

  btn_click: function(e){
    if (allowlog == 1){
      allowlog = 0;
      wx.getStorage({
        key: 'user_id',
        success: function (res) {
          var user_id = new Bmob.User();
          user_id.id = res.data;
          wx.getStorage({
            key: 'my_nick',
            success: function (ress) {
              var mydate = new Date();
              var year = mydate.getFullYear();
              var month = mydate.getMonth() + 1;
              var day = mydate.getDate();
              var date = year + "年" + month + "月" + day + "日";
              var hour = mydate.getHours(); //获取当前小时数(0-23)
              var minute = mydate.getMinutes(); //获取当前分钟数(0-59)
              var second = mydate.getSeconds(); //获取当前秒数(0-59)
              var time = hour + "时" + minute + "分" + second + "秒";
              var avatar = wx.getStorageSync("my_avatar");
              var Punch = Bmob.Object.extend("punch");
              var punch = new Punch();
              var me = ress.data;
              var query = new Bmob.Query(Punch);
              query.equalTo("nickname", me);
              query.equalTo("date", date);
              // 查询所有数据
              query.find({
                success: function (results) {
                  console.log("共查询到 " + results.length + " 条记录");
                  if (results.length == 0) {
                    if (hour >= 6) {
                      if (hour < 8) {
                        var intger;
                        if (hour < 7) {
                          if (minute <= 20) {
                            intger = 3;
                          }
                          else if (minute <= 40) {
                            intger = 2.5;
                          }
                          else {
                            intger = 2;
                          }
                        }
                        else if (hour < 8) {
                          if (minute <= 20) {
                            intger = 1.5;
                          }
                          else if (minute <= 40) {
                            intger = 1;
                          }
                          else {
                            intger = 0.5;
                          }
                        }
                        wx.showToast({
                          title: '打卡成功+' + intger + "分",
                          icon: 'success'
                        })
                        wx.getStorage({
                          key: 'my_username',
                          success: function (ress) {
                            if (ress.data) {
                              var my_username = ress.data;
                              wx.getStorage({
                                key: 'user_openid',
                                success: function (openid) {
                                  var openid = openid.data;
                                  var user = Bmob.User.logIn(my_username, openid, {
                                    success: function (users) {
                                      var score = users.get('score');
                                      score = score + intger;
                                      users.set('score', score);
                                      users.save(null, {
                                        success: function (user) {
                                        },
                                        error: function (error) {
                                          console.log(error)
                                        }
                                      });
                                    }
                                  });
                                }, function(error) {
                                  console.log(error);
                                }
                              })
                            }

                          }
                        })
                        punch.set('nickname', me);
                        punch.set('user_id', user_id);
                        punch.set('date', date);
                        punch.set('avatar', avatar)
                        punch.set('time', time);
                        console.log(me, user_id);
                        punch.save(null, {
                          success: function (result) {
                            console.log('success');
                            allowlog = 1;

                          },
                          error: function (result, error) {
                            console.log(result, error, "failure")
                          }
                        })
                      }
                      else {
                        wx.showToast({
                          title: '已过打卡时间',
                          icon: 'loading'
                        })
                      }
                    }
                    else {
                      wx.showToast({
                        title: '还没到打卡时间',
                        icon: 'loading'
                      })
                    }


                  }
                  else {
                    allowlog = 1;
                    wx.showToast({
                      title: '重复打卡',
                      icon: 'loading'
                    })
                  }
                },
                error: function (error) {
                  console.log("查询失败");
                }
              });
            }
          })

        },
      })
    }
    else{
      wx.showToast({
        title: '点的太快了',
        icon: 'loading'
      })
    }
    
  },
  tempData: function () {
    var that = this;
    var Punch = Bmob.Object.extend("punch");
    var query = new Bmob.Query(Punch);
    var mydate = new Date();
    var year = mydate.getFullYear();
    var month = mydate.getMonth() + 1;
    var day = mydate.getDate();
    var date = year + "年" + month + "月" + day + "日";
    query.equalTo("date", date);
    query.limit(100);
    var results = [];
    query.find({
      success: function (result) {
        for (var i = 0; i < result.length; i++) {
          console.log('共有打卡记录:', result.length)
          var object = result[i];
          object.set('time', object.createdAt.substring(11, 19));
          object.set('rank', i + 1);
          results[i] = object;
        }
        console.log(results);
        that.setData({
          list: results
        });
      }
    })

  },
  onLoad: function () {
    this.tempData();
  },
 
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
 
  },
 
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
 
  },
 
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
 
  },
 

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    this.tempData();
    wx.stopPullDownRefresh();
  },

  onShareAppMessage: function () {
    return {
      title: '快来打卡赢积分',
      imageUrl: '../../static/images/tao.png'
    }
  },
 
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
 
  }
})

pun.wxml

<view class="title">今日打卡榜</view>
<view class="item-box">
  <view class="items">
    <view wx:for="{{list}}"  wx:key="{{index}}"  class="item">
     
      <view data-index="{{index}}" class="inner txt">
      <i>{{item.rank}}</i>
      <image class="item-icon" mode="widthFix" src="{{item.avatar}}"></image>
       <i> {{item.nickname}}</i>
      <span class="item-data">
    
       <i class="rankpace"> 打卡时间:{{item.time}}</i>
        <!-- <span class="rankxin">{{item.xin}}</span> -->
      </span>
      
      </view>
     
    </view>
  </view>
</view><!--pages/ranking/ranking.wxml-->

<button  class="circle" bindtap="btn_click">开始打卡</button>

punch.css

page {
  background: #fff;
  padding: 0 0rpx 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background-size: cover;
  background-image: url(http://bmob-cdn-21956.b0.upaiyun.com/2018/11/08/e16028434063466d80d9d79f281ce145.jpg);
}
/* pages/leftSwiperDel/index.wxss */
view{
    box-sizing: border-box;
}
.item-box{
    width: 700rpx;
    height: 10rpx;
    margin: 0 auto;
    padding:40rpx 0;
}
.title{
  margin-top: 12px;
  font-size: 20px;
  height: 12px;
  text-align: center;  
}
.items{
    width: 100%;
}
.item{
    position: relative;
    border-top: 2rpx solid #eee;
    height: 120rpx;
    line-height: 120rpx;
    overflow: hidden;
     
}
 
 
.item:last-child{
    border-bottom: 2rpx solid #eee;
}
.inner{
    position: absolute;
    top:0;
}
.inner.txt{
    background-color: #fff;
    width: 100%;
    z-index: 5;
    padding:0 10rpx;
    transition: left 0.2s ease-in-out;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.item-icon{
    width: 64rpx;
    height: 64rpx;
    vertical-align: middle;
    margin-right: 16rpx;
    margin-left:13px;
    border-radius:50%;
 
}
 
.item-data{
  float: right;
  margin-right:5%;}
 
.rankpace{
  color: #87CEFA;
}
.circle{
    right: 35px;
    bottom: 35px;         
    width: 110px;
    background-color: #87CEFA;
    height: 110px;
    padding-top: 28px;
    color: white;
    background-size: cover;
    position: fixed;
    z-index: 9999;
    font-size: 20px;
    text-align: center;
    border: 0 solid #ffffff;
    border-radius: 500px;
    box-shadow: 4px 1px 1px #cccccc;
}

效果图

小程序界面

在这里插入图片描述 在这里插入图片描述 在这里插入图片描述 在这里插入图片描述
在这里插入图片描述

上面的积分规则可以通过修改punch.js来实现自定义。

分享界面

在这里插入图片描述

云后台

在这里插入图片描述

后话

本小程序已上线，欢迎体验。

可以扫描最上方的小程序码，也可以在微信搜索一见打卡

此小程序参考了我以前的代码仓库:https://github.com/inspurer/CampusPunchcard欢迎star,fork

如果你也想开发一款这样的小程序，从代码到上线，欢迎联系2391527690@qq.com,同时欢迎关注微信公众号: inspurer

coding不易，赞赏一下呗。