每周每天簽到獲得積分的案例
功能設計：計算每天簽到得1分，顯示得到的簽到積分，連續簽到3天[周一二三]即得+多3分，連續簽到7天[周一二三四五六日]+多7分，沒有連續即不顯示多余的3分或7分的提示…

wxml結構：

1. <!--pages/signIn2/signIn2.wxml-->
2. <view class='sign-new'>
3. <view class='in'>
4. <view class='new-head'>
5. <view class='sig-tl'>
6. <view class='tln'>已連續簽到<label class='n'>{{newSignNum}}</label>天</view>
7. <view class='tlf'>積分：<label class='f'>{{newSignIntegral}}</label></view>
8. </view>
9.  
10. <!-- 未簽到 -->
11. <view wx:if='{{!newSignBtnState}}' class='sig-qiu sig-qiu-no' bindtap='bindSignFn' >
12. <label class='ti'>簽到</label>
13. </view>
14. <!-- 已簽到 -->
15. <view wx:else class='sig-qiu sig-qiu-yes'>
16. <label class='ti'>已簽到</label>
17. </view>
18. </view>
19.  
20. <view class='new-week' >
21. <view class='we-mod'>
22. <view class='mo-fen'>
23. <label class='f f3' wx:if='{{continuityDays3}}'>+3積分</label>
24. <label class='f f7' wx:if='{{continuityDays7}}'>+7積分</label>
25. </view>
26. <view class='mo-line'>
27. <block wx:for="{{isNewSignedArr}}" wx:for-item="v" wx:key="k">
28. <label class="q {{v.isSigned?'hover':''}}"></label>
29. </block>
30. </view>
31. <view class='mo-ri'>
32. <block wx:for="{{isNewSignedArr}}" wx:for-item="v" wx:key="k">
33. <label class="t">{{v.day}}</label>
34. </block>
35. </view>
36. </view>
37. </view>
38. </view>
39. </view>

js方法：

1. Page({
2.  
3. /**
4. * 頁面的初始數據
5. */
6. data: {
7. newSignBtnState: false, //按鈕簽到狀態
8. continuityDays7: false, //連續7
9. continuityDays3: false, //連續3
10. myToday: '', //周幾
11. newSignNum: 0, //簽到天數
12. newSignIntegral:0, //簽到積分
13. //簽到數組
14. isNewSignedArr: [
15. {
16. "day": "一",
17. "isSigned": false
18. },
19. {
20. "day": "二",
21. "isSigned": false
22. },
23. {
24. "day": "三",
25. "isSigned": false
26. },
27. {
28. "day": "四",
29. "isSigned": false
30. },
31. {
32. "day": "五",
33. "isSigned": false
34. },
35. {
36. "day": "六",
37. "isSigned": false
38. },
39. {
40. "day": "日",
41. "isSigned": false
42. }
43. ],
44. },
45.  
46. //-------點擊簽到---------
47. bindSignFn(e){
48. var that = this,
49. newSignNum = that.data.newSignNum,
50. today = that.data.myToday;
51. const arr = [],
52. newSignArr = [...arr, ...that.data.isNewSignedArr];
53. //
54. today = today - 1 > 0 ? today - 1 : 6;
55. newSignArr[today].isSigned = true;
56.  
57. //當前積分
58. newSignNum++;
59. var curFen = that.data.newSignIntegral + 1;
60.  
61. that.setData({
62. newSignBtnState: true,
63. newSignNum: newSignNum,
64. newSignIntegral: curFen,
65. isNewSignedArr: newSignArr,
66. })
67.  
68. that.signAddFen();
69. },
70.  
71. //簽到積分函數
72. //連續 天數-積分： 周三+3：周一，周二，周三（1+1+3=5）； 周六+7：周日到周六（1+1+3+1+1+1+7=15）
73. signAddFen(e) {
74. var that = this,
75. oneIsSigned = that.data.isNewSignedArr[0].isSigned,
76. twoIsSigned = that.data.isNewSignedArr[1].isSigned,
77. threeIsSigned = that.data.isNewSignedArr[2].isSigned,
78. fourIsSigned = that.data.isNewSignedArr[3].isSigned,
79. fiveIsSigned = that.data.isNewSignedArr[4].isSigned,
80. sixIsSigned = that.data.isNewSignedArr[5].isSigned,
81. sevenIsSigned = that.data.isNewSignedArr[6].isSigned;
82.  
83. // 另外加分-黃色小框顯示 周三+3 , 周日+7
84. if (oneIsSigned && twoIsSigned && that.data.myToday == 3) {
85. that.setData({
86. continuityDays3: true
87. })
88. } else if (oneIsSigned && twoIsSigned && threeIsSigned && fourIsSigned && fiveIsSigned && sixIsSigned && that.data.myToday == 0) {
89. that.setData({
90. continuityDays7: true
91. })
92. }
93.  
94. //簽到后執行
95. if (that.data.newSignBtnState) {
96. // 周三 ： 一 二 三
97. if (oneIsSigned && twoIsSigned && threeIsSigned) {
98. var fens = that.data.newSignIntegral + 3 - 1;
99. that.setData({
100. newSignIntegral: fens
101. })
102. }
103. // 所有簽了： 一 二 三 四 五 六 日
104. if (oneIsSigned && twoIsSigned && threeIsSigned && fourIsSigned && fiveIsSigned && sixIsSigned && sevenIsSigned) {
105. var fens = that.data.newSignIntegral + 7 - 1;
106. that.setData({
107. newSignIntegral: fens
108. })
109. }
110. }
111. },
112.  
113. /**
114. * 生命周期函數--監聽頁面加載
115. */
116. onLoad: function (options) {
117. var that = this,
118. myDate = new Date(),
119. myToday = myDate.getDay(); //周幾 0 1 2 3 4 5 6
120. that.setData({
121. myToday: myToday
122. })
123. that.signAddFen();
124. },
125.  
126. })

有什么錯誤或優化的地方，可以提出來，大家一起學習研究…
完整案例可訪問本人github:https://github.com/xiexikang/xcx-signIn

ps：
[微信小程序：以7天為周期，連續簽到7天功能效果]

到此這篇關于微信小程序連續簽到7天積分獲得功能的示例代碼的文章就介紹到這了,更多相關微信小程序簽到功能內容請搜索服務器之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持服務器之家！

原文鏈接：https://blog.csdn.net/weixin_42211816/article/details/84673083