微信小程序簽到功能實現(xiàn)

Hi小程序小編了解到,微信小程序成為當下熱門話題,下面從多個方面來談?wù)?b>微信小程序簽到功能設(shè)計與實現(xiàn)。

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

(1)查詢用戶簽到信息接口:

查詢到所有簽到日期后用set去除重復(fù)項,然后判斷一下當天的日期是否在其中,如果不在其中,signed=False表示今日未簽到。簽到總數(shù)就是all_date的長度

  使用了datetime庫來獲取日期信息。from datetime import date

(2)添加用戶簽到信息接口:

小程序前端

wxml文件

點擊此處簽到

今日已簽到

已簽到{{total_sign}}天

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;

}

js文件

get_sign: function(){

var that = this;

var userId = wx.getStorageSync("userId");

wx.request({

url: 'https://服務(wù)器公網(wǎng)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("status error: " + res.data.Exception)

}

},

})

},


sign:function(){

var that = this;

var userId = wx.getStorageSync("userId");

wx.request({

url: 'https://服務(wù)器公網(wǎng)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("status error: " + res.data.Exception)

}

},

})

},

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

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

文章來源:https://www.hishop.com.cn/xiaocx/show_58353.html

本文轉(zhuǎn)載!

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容