微信小程序连续签到7天积分获得功能的示例代码

时间：2022-11-20 09:42:16

每周每天签到获得积分的案例
功能设计：计算每天签到得1分，显示得到的签到积分，连续签到3天[周一二三]即得+多3分，连续签到7天[周一二三四五六日]+多7分，没有连续即不显示多余的3分或7分的提示…

微信小程序连续签到7天积分获得功能的示例代码
微信小程序连续签到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

标签：

相关文章