收藏
回答

小程序实现每日签到功能

小程序如何实现每日签到功能?大佬们,求解

回答关注问题邀请回答
收藏

6 个回答

  • 辰
    2021-11-29

    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>
     
     <!--循环日期-->
     <!-- 当天以前 -->
     <view wx:for="{{date-1}}" style="color:gainsboro;">
     <text wx:if="{{item+1==calendarSignData[item+1]}}" style="color: #2ccecb;">{{item+1}}</text>
     <text wx:else="">{{item+1}}</text>
     </view>
     <!-- 当天 -->
     <view style="">
     <text wx:if="{{is_qd}}" style="color: #2ccecb;">{{date}}</text>
     <text wx:else="" style="">{{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}}积分,您已连续签到{{rule}}天!</view>
     <view class='queding' bindtap='quxiaoQd'>确定</view>
    </view>
    
    

    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;
    }
    

    可以参考一下

    如果你想开发小程序或者了解更多小程序(https://www.icarexm.com/smallwx.html)的内容,可以通过专业开发公司,来帮助你实现开发需求:厦门在乎科技-专注小程序开发、APP开发、网站开发、H5小游戏开发

    2021-11-29
    有用 1
    回复
  • 长沙繁科科技有限公司
    长沙繁科科技有限公司
    2021-11-22

    对于小白,想做一个每日打卡签到的小程序,可以直接在平台上制作就可以啦。

    可以直接套用模板,成本低,从几百到几千不等。


    那么,如何在小程序实现打卡功能呢?

    很简单,只需要4步。

    1、选择平台

    推荐一个可以免费使用模板的平台:https://hd.fkw.com/?_ta=9269

    2、选择一个合适的模板


    3、修改相关设置

    4、一键发布

    可以通过各种形式分享出去,可以在小程序里打开。吸引更多人参加。


    如果你也想制作一个每日签到打卡功能的小程序,可以点击

    https://hd.fkw.com/?_ta=9269 试一下哦!


    2021-11-22
    有用 1
    回复
  • 吕世金
    吕世金
    2021-09-02
    每天进入微信共享小程序签到是我每天的任务,所以必须完成。
    2021-09-02
    有用 1
    回复
  • 舒心家园
    舒心家园
    2020-08-18
    我找不到签到在哪里
    2020-08-18
    有用 1
    回复
  • 莫庸
    莫庸
    2018-07-18

    你要做一个怎么样的签到功能?

    写个接口签到数据存数据库不是很方便的可以实现吗。就是要在签到前让用户授权获取unionid,来将数据和用户绑定。

    如果是纯前端做的话,我能想到的就是把签到数据存入缓存中了,但是缓存会有一定几率丢失的。

    2018-07-18
    有用 1
    回复
  • try
    try
    2018-07-18

    就是相当于QQ签到这种,一开始的时候默认没签到,签到后就变成已签到,等过了一天就变成未签的,把前一天的给清空了,逻辑大概这样。。         现在问题是怎么判断过了一天时间的改变了?

    2018-07-18
    有用
    回复 3
    • 莫庸
      莫庸
      2018-07-18

      签到的时候记日期啊,然后每次用户进小程序的时候都获取当前的日期做比较,一致的话就显示已签到,不一致就显示签到。每次签到都会把当天的日期存数据库,这样还能统计这个月漏签了几天。

      2018-07-18
      回复
    • try
      try
      2018-07-18回复莫庸

      也就是说在服务端给一个字段来存储时间,根据这个字段与当前时间进行比较、是否签到,如果是就显示已签到否则未签到。。那么过了一天让它显示未签到,这个逻辑是?

      2018-07-18
      回复
    • 贰拾叁
      贰拾叁
      2019-01-16回复莫庸

      怎么写有教程吗

      2019-01-16
      回复
登录 后发表内容