二、數(shù)據(jù)庫 用一張數(shù)據(jù)表存用戶簽到的信息,每次用戶簽到都會往表中添加一條記錄了用戶id和簽到日期的數(shù)據(jù),如下圖 三、后端 后端寫兩個接口,一" />

注冊登錄

微信小程序簽到功能設(shè)計與實現(xiàn)

2018-09-20
導(dǎo)讀:一、效果圖 點擊簽到后 數(shù)據(jù)庫">二、數(shù)據(jù)庫 用一張數(shù)據(jù)表存用戶簽到的信息,每次用戶簽到都會往表中添加一條記錄了用戶id和簽到日期的數(shù)據(jù),如下圖 三、后端 后端寫兩個接口,一...

后端寫兩個接口,一個用于查詢用戶今日是否簽到和簽到記錄總數(shù),一個用于添加用戶簽到信息到數(shù)據(jù)庫。這里用的是python的flask框架。

 ?。?)查詢用戶簽到信息接口:


  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去除重復(fù)項,然后判斷一下當(dāng)天的日期是否在其中,如果不在其中,signed=False表示今日未簽到。簽到總數(shù)就是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://服務(wù)器公網(wǎng)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://服務(wù)器公網(wǎng)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. },

  用戶登錄后,會立即觸發(fā)get_sign函數(shù),從數(shù)據(jù)庫獲取用戶簽到信息存到page的data中,頁面也會顯示用戶今日是否簽到和簽到總數(shù)。

  用戶點擊簽到后,會保存簽到信息,并更新data。用showToast彈窗提示簽到成功。

重磅推薦:小程序開店目錄

第一部分:小商店是什么

第二部分:如何開通一個小商店

第三部分:如何登錄小商店

第四部分:開店任務(wù)常見問題

第五部分:小商店可以賣什么

第六部分:HiShop小程序特色功能

第七部分:小程序直播

第八部分:小程序收貨/物流

第九部分:小程序怎么結(jié)算

第十部分:小程序客服

第十一部分:電商創(chuàng)業(yè)

第十二部分:小程序游戲開發(fā)

電話咨詢 微信咨詢 預(yù)約演示 0元開店