這學期受某人所託，給學院做了一款打卡小程式。其效果如下：

一個類似論壇的社群，可發帖、評論、回覆。    
打卡可換算積分，一天只能打卡一次，且有今日打卡排行榜實時展示。   
跑步也可換算積分，換算的規則男女有別。   

這個小程式的上線成本比較高，需要營業執照，還有因為論壇的存在，上線之後還需要工信部的備案資質，否則不予更新程式碼，所以我已經停止對它的維護了。開源這個專案的程式碼： github地址,歡迎star、fork!!!

今天我主要講述其中的打卡部分的製作,為了後期維護，我已經單獨把這部分做成一個小程式，歡迎體驗。

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

如果你也想開發一款這樣的小程式，從程式碼到上線，歡迎聯絡[email protected],同時歡迎關注微信公眾號: inspurer