今天就跟大家聊聊有關怎么在微信小程序中實現簽到功能,可能很多人都不太了解,為了讓大家更加了解,小編給大家總結了以下內容,希望大家根據這篇文章可以有所收獲。
讓客戶滿意是我們工作的目標,不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術通過有效、簡單的方式提供給客戶,將通過不懈努力成為客戶在信息化領域值得信任、有價值的長期合作伙伴,公司提供的服務項目有:申請域名、虛擬空間、營銷軟件、網站建設、沙雅網站維護、網站推廣。
sign.wxml
<!--index.wxml--> <view class="calendar"> <view class='bcfff'> <view class="weekName"> <view class="monday">一</view> <view class="tuesday">二</view> <view class="wednesday">三</view> <view class="thursday">四</view> <view class="friday">五</view> <view class="saturday">六</view> <view class="sunday">日</view> </view> <view class="week"> <!--填補空格--> <view wx:for="{{nbsp}}">\n</view> <!--循環(huán)日期--> <!-- 當天以前 --> <view wx:for="{{date-1}}" > <text wx:if="{{item+1==calendarSignData[item+1]}}" >{{item+1}}</text> <text wx:else="">{{item+1}}</text> </view> <!-- 當天 --> <view > <text wx:if="{{is_qd}}" >{{date}}</text> <text wx:else="" >{{date}}</text> </view> <!-- 以后 --> <view wx:for="{{monthDaySize-date}}">{{item+date+1}}</view> </view> </view> <view class="calendarSign"> <image bindtap="calendarSign" class='btnimg' src='https://jpadmin.99dudesign.com/public/img/source/btn_icon_wodekaoqin1.png'></image> <!-- wx:if="{{date!=calendarSignData[date]}}" --> </view> </view> <!-- 簽到成功 --> <view class='zhegai hide {{qdView?"block":""}}' bindtap='quxiaoQd'></view> <view class='successqd hide {{qdView?"block":""}}'> <view class='qdtitle'>簽到成功</view> <view class='qdcontent' wx:if="{{is_qd}}">今天已經簽過了~</view> <view class='qdcontent' wx:else>簽到成功,獲得{{integral}}積分,您已連續(xù)簽到{{rule}}天!</view> <view class='queding' bindtap='quxiaoQd'>確定</view> </view>
sign.js
var app = getApp(); var calendarSignData; var date; var calendarSignDay; var is_qd; Page({ /** * 頁面的初始數據 */ data: { qdView: false, calendarSignData: "", calendarSignDay: "", is_qd: false, }, quxiaoQd: function (e) { var that = this; that.setData({ qdView: false, is_qd: true }) }, //事件處理函數 calendarSign: function (e) { var that = this; that.setData({ qdView: true }) calendarSignData[date] = date; console.log(calendarSignData); calendarSignDay = calendarSignDay + 1; var today = new Date().getDate() wx.request({ url: getApp().data.host + '后臺的接口', method: "POST", data: { "user_id": wx.getStorageSync('user_id'), "sign_num": today }, header: { 'content-type': 'application/x-www-form-urlencoded' //通過post傳值,所以要加header }, success: function (res) { that.setData({ rule: res.data.rule, integral: res.data.integral, }) } }) wx.setStorageSync("calendarSignData", calendarSignData); wx.setStorageSync("calendarSignDay", calendarSignDay); this.setData({ calendarSignData: calendarSignData, calendarSignDay: calendarSignDay }) }, /** * 生命周期函數--監(jiān)聽頁面加載 */ onLoad: function () { var that = this; var mydate = new Date(); var year = mydate.getFullYear(); var month = mydate.getMonth() + 1; date = mydate.getDate(); console.log("date" + date) var day = mydate.getDay(); console.log(day) var nbsp = 7 - ((date - day) % 7); console.log("nbsp" + nbsp); var monthDaySize; if (month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12) { monthDaySize = 31; } else if (month == 4 || month == 6 || month == 9 || month == 11) { monthDaySize = 30; } else if (month == 2) { // 計算是否是閏年,如果是二月份則是29天 if ((year - 2000) % 4 == 0) { monthDaySize = 29; } else { monthDaySize = 28; } }; // 傳ajax wx.request({ url: getApp().data.host + 'index.php?g=api&m=output&a=sign_list', method: "POST", data: { "user_id": wx.getStorageSync('user_id') }, header: { 'content-type': 'application/x-www-form-urlencoded' }, success: function (res) { // 判斷是否簽到過 if (res.data == null) { calendarSignData = new Array(monthDaySize) wx.setStorageSync("calendarSignData", calendarSignData); } else { var is_qd; for (var i in res.data) { parseInt(res.data[i]) calendarSignData = new Array(monthDaySize) calendarSignData[parseInt(res.data[i])] = parseInt(res.data[i]) wx.setStorageSync("calendarSignData", calendarSignData); console.log(date) console.log(parseInt(res.data[i])) if (parseInt(res.data[i]) == date) { console.log(1) wx.setStorageSync("calendarSignDay", 1); is_qd = true } else { wx.setStorageSync("calendarSignDay", 0); } } } console.log(is_qd) calendarSignData = wx.getStorageSync("calendarSignData") calendarSignDay = wx.getStorageSync("calendarSignDay") console.log(calendarSignData); console.log(calendarSignDay) that.setData({ is_qd: is_qd, year: year, month: month, nbsp: nbsp, monthDaySize: monthDaySize, date: date, calendarSignData: calendarSignData, calendarSignDay: calendarSignDay }) } }) }, /** * 生命周期函數--監(jiān)聽頁面初次渲染完成 */ onReady: function () { }, /** * 生命周期函數--監(jiān)聽頁面顯示 */ onShow: function () { }, /** * 生命周期函數--監(jiān)聽頁面隱藏 */ onHide: function () { }, /** * 生命周期函數--監(jiān)聽頁面卸載 */ onUnload: function () { wx.removeStorageSync("calendarSignData") wx.removeStorageSync("calendarSignDay") }, /** * 頁面相關事件處理函數--監(jiān)聽用戶下拉動作 */ onPullDownRefresh: function () { }, /** * 頁面上拉觸底事件的處理函數 */ onReachBottom: function () { }, /** * 用戶點擊右上角分享 */ onShareAppMessage: function () { } })
sign.wxss
page { background-color: #2ccecb; } .t_red { color: red; } .t_blue { color: royalblue; } .calendar { width: 500rpx; margin: 200rpx 125rpx; /* height: 600rpx; *//* background-color: #ffffff; */ border-radius: 4rpx; } .time { padding: 16rpx 20rpx; background-color: wheat; display: flex; } .time view { flex: 1; font-size: 30rpx; } .time view text { font-size: 38rpx; } .weekName { background-color: #54ff9c; width: 100%; display: flex; padding: 30rpx 0; font-size: 40rpx; color: #fff; } .weekName view { flex: 1; text-align: center; } .week { width: 100%; } .week view { width: 14.2%; height: 50rpx; line-height: 50rpx; display: inline-block; margin: 10rpx 0; text-align: center; font-size: 30rpx; color: #747474; } .week view text { width: 100%; height: 100%; display: inline-block; } .calendarSign { margin-top: -75rpx; text-align: center; } .btnimg { width: 150rpx; height: 150rpx; border-radius: 50%; } .bcfff { background-color: white; padding-bottom: 100rpx; } .zhegai { position: fixed; top: 0; left: 0; bottom: 0; width: 100%; height: 100%; background-color: black; opacity: 0.4; } .successqd { position: fixed; top: 50%; left: 50%; width: 550rpx; margin-left: -275rpx; margin-top: -200rpx; background-color:white; border-radius: 6rpx; border: 2rpx solid #54ff9c; text-align: center; } .qdtitle{ font-size: 32rpx; font-weight: bold; color: #232323; padding: 20rpx; } .qdcontent{ font-size: 30rpx; color: #232323; padding: 20rpx 10rpx; } .queding{ font-size: 30rpx; color: #232323; border-top: 1rpx solid #cccccc; padding: 20rpx; }
看完上述內容,你們對怎么在微信小程序中實現簽到功能有進一步的了解嗎?如果還想了解更多知識或者相關內容,請關注創(chuàng)新互聯行業(yè)資訊頻道,感謝大家的支持。
網站名稱:怎么在微信小程序中實現簽到功能
網址分享:http://redsoil1982.com.cn/article15/ghojdi.html
成都網站建設公司_創(chuàng)新互聯,為您提供域名注冊、網站營銷、微信小程序、動態(tài)網站、全網營銷推廣、電子商務
聲明:本網站發(fā)布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯