微信小程序实现签到功能


Posted in Javascript onOctober 31, 2018

本文实例为大家分享了微信小程序实现签到功能的具体代码,供大家参考,具体内容如下

效果图:

微信小程序实现签到功能

微信小程序实现签到功能

今天是16号,所以显示已签到,渲染页面时请求后台传的参数为这月签到的日期

如:["16", "14"]

点击签到执行

calendarSign

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.js

var app = getApp();
var calendarSignData;
var date;
var calendarSignDay;
var is_qd;
Page({
 
 /**
 * 页面的初始数据
 */
 data: {
 qdView: false,
 calendarSignData: "",
 calendarSignDay: "",
 is_qd: false,
 },
 quxiaoQd: function (e) {
 var that = this;
 that.setData({
 qdView: false,
 is_qd: true
 })
 },
 //事件处理函数
 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 + '后台的接口',
 method: "POST",
 data: {
 "user_id": wx.getStorageSync('user_id'),
 "sign_num": today
 },
 header: {
 'content-type': 'application/x-www-form-urlencoded' //通过post传值,所以要加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
 })
 },
 /**
 * 生命周期函数--监听页面加载
 */
 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) {
 // 计算是否是闰年,如果是二月份则是29天
 if ((year - 2000) % 4 == 0) {
 monthDaySize = 29;
 } else {
 monthDaySize = 28;
 }
 };
 // 传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) {
 // 判断是否签到过 
 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
 })
 }
 })
 
 
 },
 
 /**
 * 生命周期函数--监听页面初次渲染完成
 */
 onReady: function () {
 
 },
 
 /**
 * 生命周期函数--监听页面显示
 */
 onShow: function () {
 
 },
 
 /**
 * 生命周期函数--监听页面隐藏
 */
 onHide: function () {
 
 },
 
 /**
 * 生命周期函数--监听页面卸载
 */
 onUnload: function () {
 wx.removeStorageSync("calendarSignData")
 wx.removeStorageSync("calendarSignDay")
 },
 
 /**
 * 页面相关事件处理函数--监听用户下拉动作
 */
 onPullDownRefresh: function () {
 
 },
 
 /**
 * 页面上拉触底事件的处理函数
 */
 onReachBottom: function () {
 
 },
 
 /**
 * 用户点击右上角分享
 */
 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;
}

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery控制listbox中项的移动并排序
Nov 12 Javascript
jQuery 连续列表实现代码
Dec 21 Javascript
setTimeout和setInterval的区别你真的了解吗?
Mar 31 Javascript
jquery模拟按下回车实现代码
Sep 20 Javascript
javascript时间函数基础介绍
Mar 28 Javascript
Javascript中string转date示例代码
Nov 01 Javascript
javascript的变量、传值、传址、参数之间关系
Jul 26 Javascript
jQuery实现点击水纹波动动画
Apr 10 Javascript
Easyui笔记2:实现datagrid多行删除的示例代码
Jan 14 Javascript
如何实现双向绑定mvvm的原理实现
May 28 Javascript
微信小程序全局变量改变监听的实现方法
Jul 15 Javascript
javascript+css实现俄罗斯方块小游戏
Jun 28 Javascript
vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例
Oct 31 #Javascript
微信小程序实现自动定位功能
Oct 31 #Javascript
iview在vue-cli3如何按需加载的方法
Oct 31 #Javascript
jQuery+PHP实现上传裁剪图片
Jun 29 #jQuery
vue+iview 实现可编辑表格的示例代码
Oct 31 #Javascript
详解vue 项目白屏解决方案
Oct 31 #Javascript
微信小程序ibeacon三点定位详解
Oct 31 #Javascript
You might like
DOTA2 1月28日更新:监管系统降临刀塔世界
2021/01/28 DOTA
可以在线执行PHP代码包装修正版
2008/03/15 PHP
PHP实现AES256加密算法实例
2014/09/22 PHP
php输出金字塔的2种实现方法
2014/12/16 PHP
JavaScript中函数声明优先于变量声明的实例分析
2012/03/01 Javascript
JavaScript中的typeof操作符用法实例
2014/04/05 Javascript
解决checkbox的attr(checked)一直为undefined问题
2014/06/16 Javascript
Jquery注册事件实现方法
2015/05/18 Javascript
JavaScript使用位运算符判断奇数和偶数的方法
2015/06/01 Javascript
给angular加上动画效遇到的问题总结
2016/02/17 Javascript
Bootstrap modal 多弹窗之叠加关闭阴影遮罩问题的解决方法
2017/02/27 Javascript
关于JS与jQuery中的文档加载问题
2017/08/22 jQuery
用Axios Element实现全局的请求loading的方法
2018/03/15 Javascript
教你如何用node连接redis的示例代码
2018/07/12 Javascript
vue+node实现图片上传及预览的示例方法
2018/11/22 Javascript
利用Webpack实现小程序多项目管理的方法
2019/02/25 Javascript
[00:47]DOTA2荣耀之路6:天火,天火!
2018/05/30 DOTA
[12:29]2018国际邀请赛 开幕秀
2018/08/22 DOTA
python模拟鼠标拖动操作的方法
2015/03/11 Python
在Python中封装GObject模块进行图形化程序编程的教程
2015/04/14 Python
python通过函数属性实现全局变量的方法
2015/05/16 Python
python中将zip压缩包转为gz.tar的方法
2018/10/18 Python
PIL包中Image模块的convert()函数的具体使用
2020/02/26 Python
python实现学生管理系统开发
2020/07/24 Python
HTML5拖拽功能实现的拼图游戏
2018/07/31 HTML / CSS
美国知名男士服饰品牌:Brooks Brothers(布克兄弟)
2016/08/25 全球购物
个人找工作自荐信格式
2013/09/21 职场文书
管理学专业个人求职信范文
2013/12/13 职场文书
英语专业学生个人求职信
2014/01/28 职场文书
职工运动会邀请函
2014/02/02 职场文书
小学教师办公室制度
2014/02/03 职场文书
求职信结尾怎么写
2014/05/26 职场文书
大学辅导员述职报告
2015/01/10 职场文书
学雷锋活动简报
2015/07/20 职场文书
2015年十月一日放假通知
2015/08/18 职场文书
浅谈Nginx 中的两种限流方式
2021/03/31 Servers