一、效果图

1.

2.点击签到后

3.

4.二、数据库

5.用一张数据表存用户签到的信息，每次用户签到都会往表中添加一条记录了用户id和签到日期的数据，如下图

6.

三、后端

7.后端写两个接口，一个用于查询用户今日是否签到和签到记录总数，一个用于添加用户签到信息到数据库。这里用的是python的flask框架。

8.（1）查询用户签到信息接口：

@app.route('/get_sign/user_id')defget_sign(user_id):try:data=get_sign_info(user_id)exceptExceptionase:returnjsonify({'status':0,'Exception':str(e)})returnjsonify({'status':1,'data':data})defget_sign_info(user_id):conn=sqlite3.connect('test.sqlite')cursor=conn.cursor()cursor.execute('selectdatefromsignwhereuser_id=?',(user_id,))all_date=set([x[0]forxincursor.fetchall()])now_date=date.today().strftime('%Y-%m-%d')//将日期字符串化ifnow_dateinall_date:signed=Trueelse:signed=Falsetotal=len(all_date)conn.close()return{'total':total,'signed':signed}

9.查询到所有签到日期后用set去除重复项，然后判断一下当天的日期是否在其中，如果不在其中，signed=False表示今日未签到。签到总数就是all_date的长度

10.使用了datetime库来获取日期信息。fromdatetimeimportdate

11.（2）添加用户签到信息接口：

@app.route('/sign/user_id')defsign(user_id):try:update_sign(user_id)exceptExceptionase:returnjsonify({'status':0,'Exception':str(e)})returnjsonify({'status':1})defupdate_sign(user_id):now_date=date.today().strftime('%Y-%m-%d')conn=sqlite3.connect('test.sqlite')cursor=conn.cursor()cursor.execute('insertintosign(user_id,date)values(?,?)',(user_id,now_date))conn.commit()conn.close()四、小程序前端

12.wxml文件

viewclass="sign"wx:if="{{isLogin==true}}"imageclass="image"src='../../dist/images/sign.png'/imageviewclass="sign_info"viewwx:if="{{signed==false}}"bindtap='sign'点击此处签到/viewviewwx:if="{{signed==true}}"今日已签到/viewview已签到{{total_sign}}天/view/view/view

13.wxss文件

.image{float:left;width:140rpx;height:140rpx;margin-right:7%;margin-left:20%;}.sign{margin-top:10%;}.sign_info{width:100%;color:#666;font-size:43rpx;}

14.js文件

get_sign:function(){varthat=this;varuserId=wx.getStorageSync("userId");wx.request({url:'http://服务器公网ip:80/get_sign/'+userId,method:"GET",success:function(res){if(res.data.status==1){that.setData({total_sign:res.data.data.total,signed:res.data.data.signed,})}else{console.log("statuserror:"+res.data.Exception)}},})},sign:function(){varthat=this;varuserId=wx.getStorageSync("userId");wx.request({url:'http://服务器公网ip:80/sign/'+userId,method:"GET",success:function(res){if(res.data.status==1){that.setData({total_sign:that.data.total_sign+1,signed:true,})wx.showToast({title:'成功',icon:'success',duration:2000})}else{console.log("statuserror:"+res.data.Exception)}},})},

15.用户登录后，会立即触发get_sign函数，从数据库获取用户签到信息存到page的data中，页面也会显示用户今日是否签到和签到总数。

16.用户点击签到后，会保存签到信息，并更新data。用showToast弹窗提示签到成功。

17.作者：luozx207地址：http://www.cnblogs.com/luozx207/p/9525042.html

相关文章：

18.微信小程序实用组件：日历签到微信小程序（BDEDU签到工具）项目总结微信小程序Demo：蝌蚪签到微信小程序demo：打卡签到