微信小程序签到功能设计与实现

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

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

1. @app.route('/get_sign/')
2. def get_sign(user_id):
3. try:
4. data=get_sign_info(user_id)
5. except Exception as e:
6. return jsonify({'status':0,'Exception':str(e)})
7. return jsonify({'status':1,'data':data})
8.  
9. def get_sign_info(user_id):
10. conn = sqlite3.connect('test.sqlite')
11. cursor = conn.cursor()
12. cursor.execute('select date from sign where user_id=?',(user_id,))
13. all_date=set([x[0] for x in cursor.fetchall()])
14. now_date=date.today().strftime('%Y-%m-%d')//将日期字符串化
15. if now_date in all_date:
16. signed=True
17. else:
18. signed=False
19. total=len(all_date)
20. conn.close()
21. return {'total':total,'signed':signed}

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

　　使用了datetime库来获取日期信息。from datetime import date

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

1. @app.route('/sign/')
2. def sign(user_id):
3. try:
4. update_sign(user_id)
5. except Exception as e:
6. return jsonify({'status':0,'Exception':str(e)})
7. return jsonify({'status':1})
8.  
9. def update_sign(user_id):
10. now_date=date.today().strftime('%Y-%m-%d')
11. conn = sqlite3.connect('test.sqlite')
12. cursor = conn.cursor()
13. cursor.execute('insert into sign (user_id,date) values(?,?)',\
14. (user_id,now_date))
15. conn.commit()
16. conn.close()

小程序前端

wxml文件

1. 点击此处签到
2. 今日已签到
3. 已签到{{total_sign}}天

wxss文件

1. .image{
2. float:left;
3. width: 140rpx;
4. height: 140rpx;
5. margin-right: 7%;
6. margin-left:20%;
7. }
8. .sign{
9. margin-top: 10%;
10. }
11.  
12. .sign_info{
13. width: 100%;
14. color: #666;
15. font-size: 43rpx;
16. }

js文件

1. get_sign: function(){
2. var that = this;
3. var userId = wx.getStorageSync("userId");
4. wx.request({
5. url: 'https://服务器公网ip:80/get_sign/'+userId,
6. method: "GET",
7. success: function (res) {
8. if (res.data.status == 1) {
9. that.setData({
10. total_sign: res.data.data.total,
11. signed: res.data.data.signed,
12. })
13. }
14. else{
15. console.log("status error: " + res.data.Exception)
16. }
17. },
18. })
19. },
20.  
21. sign:function(){
22. var that = this;
23. var userId = wx.getStorageSync("userId");
24. wx.request({
25. url: 'https://服务器公网ip:80/sign/' + userId,
26. method: "GET",
27. success: function (res) {
28. if (res.data.status == 1) {
29. that.setData({
30. total_sign: that.data.total_sign+1,
31. signed: true,
32. })
33. wx.showToast({
34. title: '成功',
35. icon: 'success',
36. duration: 2000
37. })
38. }
39. else {
40. console.log("status error: " + res.data.Exception)
41. }
42. },
43. })
44. },

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

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