微信小程序实现签到功能


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 相关文章推荐
JavaScript判断窗口是否最小化的代码(跨浏览器)
Aug 01 Javascript
javascript控制swfObject应用介绍
Nov 29 Javascript
浅谈JavaScript Math和Number对象
Jan 26 Javascript
Node.js 学习笔记之简介、安装及配置
Mar 03 Javascript
javascript创建动态表单的方法
Jul 25 Javascript
JS HTML5拖拽上传图片预览
Jul 18 Javascript
js控住DOM实现发布微博效果
Aug 30 Javascript
前端图片懒加载(lazyload)的实现方法(提高用户体验)
Aug 21 Javascript
解决vue 中 echart 在子组件中只显示一次的问题
Aug 07 Javascript
微信小程序实现留言功能
Oct 31 Javascript
layui 弹出删除确认界面的实例
Sep 06 Javascript
解决Idea、WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题
Oct 11 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
mysql5详细安装教程
2007/01/15 PHP
Excel数据导入Mysql数据库的实现代码
2008/06/05 PHP
php+jquery+html实现点击不刷新加载更多的实例代码
2016/08/12 PHP
浅谈PHP安全防护之Web攻击
2017/01/03 PHP
PHP实现判断数组是一维、二维或几维的方法
2017/02/06 PHP
PHP使用DOM和simplexml读取xml文档的方法示例
2017/02/08 PHP
jquery 图片 上一张 下一张 链接效果(续篇)
2010/04/20 Javascript
JS实现可展开折叠层的鼠标拖曳效果
2015/10/09 Javascript
JavaScript代码因逗号不规范导致IE不兼容的问题
2016/02/25 Javascript
Sea.JS知识总结
2016/05/05 Javascript
javascript 分号总结及详细介绍
2016/09/24 Javascript
jQuery右下角悬浮广告实例
2016/10/17 Javascript
微信小程序 配置文件详细介绍
2016/12/14 Javascript
jQuery插件版本冲突的处理方法分析
2017/01/16 Javascript
详解Angular2响应式表单
2017/06/14 Javascript
解决JS内存泄露之js对象和dom对象互相引用问题
2017/06/25 Javascript
JS实现页面内跳转的简单代码
2017/09/03 Javascript
vue el-table实现自定义表头
2019/12/11 Javascript
Python 变量类型及命名规则介绍
2013/06/08 Python
python模拟Django框架实例
2016/05/17 Python
Python实现Youku视频批量下载功能
2017/03/14 Python
Python 3中print函数的使用方法总结
2017/08/08 Python
python爬虫基础教程:requests库(二)代码实例
2019/04/09 Python
提升Python效率之使用循环机制代替递归函数
2019/07/23 Python
matlab 计算灰度图像的一阶矩,二阶矩,三阶矩实例
2020/04/22 Python
OpenCV利用python来实现图像的直方图均衡化
2020/10/21 Python
一款纯css3实现的响应式导航
2014/10/31 HTML / CSS
会计电算化专业应届大学生求职信
2013/10/22 职场文书
2014年人事专员工作总结
2014/11/19 职场文书
介绍信格式样本
2015/05/05 职场文书
2015年大学团支部工作总结
2015/05/13 职场文书
2016大学生形势与政策心得体会
2016/01/12 职场文书
复制别人的成功真的会成功吗?
2019/10/17 职场文书
导游词之澳门妈祖庙
2019/12/19 职场文书
node.js使用express-fileupload中间件实现文件上传
2021/07/16 Javascript
Nginx 反向代理解决跨域问题多种情况分析
2022/01/18 Servers