微信公衆號：inspurer
關注可解鎖更多的編程技能。問題或建議，請公衆號留言;
若是你以爲本文對你有幫助，歡迎讚揚[1]javascript
這學期受某人所託，給學院作了一款打卡小程序。其效果以下：css
一個相似論壇的社區，可發帖、評論、回覆。
打卡可換算積分，一天只能打卡一次，且有今日打卡排行榜實時展現。
跑步也可換算積分，換算的規則男女有別。
這個小程序的上線成本比較高，須要營業執照，還有由於論壇的存在，上線以後還須要工信部的備案資質，不然不予更新代碼，因此我已經中止對它的維護了。開源這個項目的代碼： github地址,歡迎star、fork!!!java
今天我主要講述其中的打卡部分的製做,爲了後期維護，我已經單獨把這部分作成一個小程序，歡迎體驗。git
talk is cheap,show the code.github
核心代碼
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
本文分享自微信公衆號 - 月小水長（inspurer）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。微信