微信扫一扫以上小程序【许愿灯池】可以查看具体每日签到功能

效果图展示：

实现思路：

这里利用了wx.setStorageSynic()缓存，同时在设置缓存的时候赋值给一个变量，之后将这个变量和new Date().getDate()获得的当日的value值进行比较，如果相同则不会执行，如果不同则会实现签到功能。这也就是每天只能签到一次。

①index.wxml

<view class="context">
<view class="top"><image src="../../icon/left.png" bindtap="bindPreMonth"></image><view>{{year}}年{{month}}月</view><image src="../../icon/right.png" bindtap="bindNextMonth"></image>
</view><view  class="middle"><view wx:for="{{data_arr}}" wx:key="index" class="middle_num">{{item}}</view>
</view><view class="calen"><view wx:for="{{startWeek}}" wx:key="index" class="calen_blank"></view><view wx:for="{{currentMonthDays}}" class='{{(index+1 == today[0].today ? "active": "calen_num")}}' wx:key="index">{{index+1}}</view></view></view>
<button bindtap="qiandao">签到</button><view class="date"><text>已连续签到</text><view class="num">{{num}}</view><text>天</text>
</view><view class="fighting"><text>加油！</text>
</view>

②index.wxss

.context{width: 96%;background-color: antiquewhite;margin: 0 auto;padding: 10rpx;border-radius: 20px 20px 20px 20px;margin-top: 20rpx;
}
.top{height: 80rpx;display: flex;justify-content: space-around;
}
.top image{height: 30rpx;width: 30rpx;
}
.middle{display: flex;
}
.middle_num{width: 14%;display: flex;justify-content: center;align-items: center;
}
.calen{display: flex;height: 400rpx;flex-wrap: wrap; /* 必要的时候拆行或拆列。 */
}
.calen_blank{width: 14%;height: 20%;background-color: antiquewhite;
}
.calen_num{width: 14%;height: 20%;display: flex;justify-content: center;align-items: center;
}
.active{background-color:yellow;width: 14%;height: 20%;display: flex;justify-content: center;align-items: center;border-radius: 50%;
}button{position: relative;margin-top: 10%;border-radius: 20px 20px 20px 20px;
}.date{position: relative;left: 3%;margin-top: 130rpx;width: 30%;height: 125rpx;text-align: center;background-color: white;border-radius: 20px 20px 20px 20px;
}
.date .num{color:red;font-weight: 700;
}
.date text{font-size: 32rpx;
}.fighting{position: relative;left: 65%;margin-top: -119rpx;width: 30%;height: 125rpx;text-align: center;background-color: white;border-radius: 20px 20px 20px 20px;line-height: 125rpx;
}
.fighting text{font-size: 55rpx;font-weight: 700;color: red;
}

③index.js

let num =0Page({/*** 页面的初始数据*/data: {data_arr:["日","一","二","三","四","五","六"],year:"",month:"",today:[],num:0,nowlist:[]},qiandao(){ let m = wx.getStorageSync('day')var time = new Date().getDate()if(m!=time){wx.showToast({title: '今日已成功签到',duration:2000})num++let todaylist = this.data.todaytodaylist.push({today:time})this.setData({num:num,today:todaylist})// console.log(todaylist);wx.setStorageSync('day', new Date().getDate()) wx.setStorageSync('month', new Date().getMonth()+1)wx.setStorageSync('num', this.data.num)}
else{wx.showToast({title: '今日已签到',icon:'error',duration:2000})
}},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {   let number = wx.getStorageSync('num')   let day = wx.getStorageSync('day')let nowlist = this.data.nowlistnowlist.push({today:day})this.setData({num:number,today:nowlist})let now = new Date()let year = now.getFullYear()// month获取是从 0~11let month = now.getMonth() + 1this.setData({year,month})this.showCalendar()},showCalendar(){let {year,month} = this.data//以下两个month已经+1let currentMonthDays = new Date(year,month,0).getDate() //获取当前月份的天数let startWeek = new Date(year + '/' + month + '/' + 1).getDay(); //本月第一天是从星期几开始的this.setData({currentMonthDays,startWeek})},//上个月按钮bindPreMonth(){let {year,month} = this.data//判断是否是1月if(month - 1 >= 1){month = month - 1 }else{month = 12year = year - 1}this.setData({month,year})this.showCalendar()},//下个月按钮bindNextMonth(){let {year,month} = this.data//判断是否是12月if(month + 1 <= 12){month = month + 1 }else{month = 1year = year + 1}this.setData({month,year})this.showCalendar()}})

注意：

复制代码后会出现按钮没有显示，这是因为这个按钮是logo图片，需要自行寻找logo来替换代码中的图片路径。

总结：

通过以上代码可以搭建出和【许愿灯池】一样的每日签到功能。如果想知道具体的签到效果，可以微信搜一搜【许愿灯池】或是二维码扫描如下：

微信小程序实现每日签到功能相关推荐

微信小程序|简单的签到功能（前端部分）
微信小程序部分 sign.wxml  <view class="container"><view class=&qu ...
基于微信小程序的每日签到打卡
社会的发展和科学技术的进步,互联网技术越来越受欢迎.手机也逐渐受到广大人民群众的喜爱,也逐渐进入了每个用户的使用.手机具有便利性,速度快,效率高,成本低等优点. 因此,构建符合自己要求的操作系统是非常 ...
微信小程序实现每日签到、连续签到
昨天在看自己写的小程序项目,无意中打开了CSDN APP,突然间觉得,我去,如果在小程序中加个"签到"功能,岂不美哉!(好吧,其实是买的书昨天没到货,然后闲着无事,就想起了大明湖畔 ...
微信小程序分析送积分功能如何实现_微信小程序积分商城解决方案（一）
概念微信小程序积分商城的"积分商城"概念,是指的用户访问微信小程序经过授权用户信息或是验证注册的用户加入会员,基于微信APP环境使用微信支付等工具进行交易,推出的一种会员奖励计划 ...
java计算机毕业设计基于安卓Android/微信小程序的大学生签到管理系统APP
项目介绍随着Internet的发展,人们的日常生活已经离不开网络.未来人们的生活与工作将变得越来越数字化,网络化和电子化.网上管理,它将是直接管理签到系统app的最新形式.本论文是以构建签到系统ap ...
微信小程序拍照打卡功能实现
微信小程序拍照打卡功能实现附Java代码小程序端签到页面wxml 签到页面js 拍照页面wxml 拍照页面js Java后台保存照片保存打卡数据由于拍照组件是相当于一个块,用隐藏显示的方 ...
低成本免服务器微信小程序源码多功能集合搭建
现如今在线副业已经成为一种趋势,越来越多的人选择副业作为起步.小程序凭借不占内存.无论前期投入还是后期维护,成本都较低:如果你想副业来赚钱,选择小程序是非常不错的选择,有很多人可能会问,我不会做小程序 ...
微信小程序（BDEDU签到工具）项目总结
本篇博客用于记录微信小程序(BDEDU签到工具)的开发过程微信小程序的开发入门 1. 申请微信小程序申请小程序,无非是去微信公众平台选择申请小程序,然后填写一些相关信息即可. 2. 部署开发环境 ...
nodejs android 推送,利用Nodejs怎么实现一个微信小程序消息推送功能
利用Nodejs怎么实现一个微信小程序消息推送功能发布时间:2021-01-20 13:55:29 来源:亿速云阅读:92 作者:Leah 今天就跟大家聊聊有关利用Nodejs怎么实现一个微信小程 ...
php 微信小程序循环多选,微信小程序实现多选功能
本文为大家分享了微信小程序实现多选功能的具体代码,供大家参考,具体内容如下代码: {{num + 1}}/{{quesyion.length}}{{question[num][0]}} A {{qu ...

微信小程序实现每日签到功能

效果图展示：

实现思路：

①index.wxml

②index.wxss

③index.js

注意：

总结：

通过以上代码可以搭建出和【许愿灯池】一样的每日签到功能。如果想知道具体的签到效果，可以微信搜一搜【许愿灯池】或是二维码扫描如下：

微信小程序实现每日签到功能相关推荐

最新文章

热门文章

微信小程序实现每日签到功能

效果图展示：

实现思路：

①index.wxml

②index.wxss

③index.js

注意：

总结：

通过以上代码可以搭建出和【许愿灯池】一样 的每日签到功能。如果想知道具体的签到效果，可以微信搜一搜【许愿灯池】或是二维码扫描如下：

微信小程序实现每日签到功能相关推荐

最新文章

热门文章

通过以上代码可以搭建出和【许愿灯池】一样的每日签到功能。如果想知道具体的签到效果，可以微信搜一搜【许愿灯池】或是二维码扫描如下：