Shulou(Shulou.com)06/01 Report--

This article mainly introduces "how to realize WeChat Mini Programs's calendar check-in". In daily operation, I believe many people have doubts about how to realize WeChat Mini Programs's calendar check-in. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts about "how to realize WeChat Mini Programs's calendar check-in". Next, please follow the editor to study!

Today is the 16th, so it shows that you have checked in. When rendering the page, the parameter passed by the backend is the check-in date of this month.

For example, ["16", "14"]

Click to check in for execution

CalendarSign

Sign.wxml

one

two

three

four

five

six

Day

\ n

{{item+1}}

{{item+1}}

{{date}}

{{date}}

{{item+date+1}}

Check in successfully

It has already been signed today.

Check in successfully, get {{integral}} points, you have signed in {{rule}} days in a row!

Confirm

Sign.js

Var app = getApp ()

Var calendarSignData

Var date

Var calendarSignDay

Var is_qd

Page ({

/ * *

* initial data of the page

, /

Data: {

QdView: false

CalendarSignData: ""

CalendarSignDay: ""

Is_qd: false

}

QuxiaoQd: function (e) {

Var that = this

That.setData ({

QdView: false

Is_qd: true

})

}

/ / event handling function

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 + 'background interface'

Method: "POST"

Data: {

"user_id": wx.getStorageSync ('user_id')

"sign_num": today

}

Header: {

The value of 'content-type':' application/x-www-form-urlencoded' / / is passed through post, so add 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

})

}

/ * *

* Lifecycle function-- listen for page loading

, /

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) {

/ / calculate whether it is a leap year, or 29 days if it is February

If ((year-2000) 4 = = 0) {

MonthDaySize = 29

} else {

MonthDaySize = 28

}

}

/ / transfer 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) {

/ / determine whether you have checked in or not

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

})

}

})

}

/ * *

* Lifecycle function-the listening page is rendered for the first time

, /

OnReady: function () {

}

/ * *

* Lifecycle function-- listen for page display

, /

OnShow: function () {

}

/ * *

* Lifecycle function-- listening for page hiding

, /

OnHide: function () {

}

/ * *

* Lifecycle function-- unload the listening page

, /

OnUnload: function () {

Wx.removeStorageSync ("calendarSignData")

Wx.removeStorageSync ("calendarSignDay")

}

/ * *

* Page-related event handler function-listens for user drop-down actions

, /

OnPullDownRefresh: function () {

}

/ * *

* Handler for pull bottoming event on the page

, /

OnReachBottom: function () {

}

/ * *

* users click on the upper right corner to share

, /

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

}

At this point, the study of "how to realize WeChat Mini Programs's calendar check-in" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.