微信小程序实现签到功能


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 相关文章推荐
Maps Javascript
Jan 22 Javascript
IE 缓存策略的BUG的解决方法
Jul 21 Javascript
jQuery动态添加 input type=file的实现代码
Jun 14 Javascript
jQuery实现鼠标跟随提示层效果代码(可显示文本,Div,Table,Html等)
Apr 18 Javascript
Boostrap入门准备之border box
May 09 Javascript
AngularJS教程 ng-style 指令简单示例
Aug 03 Javascript
jQuery实现鼠标经过像翻页和描点链接效果
Aug 08 Javascript
js实现淡入淡出轮播切换功能
Jan 13 Javascript
vue + typescript + video.js实现 流媒体播放 视频监控功能
Jul 07 Javascript
vue element自定义表单验证请求后端接口验证
Dec 11 Javascript
JS面向对象编程基础篇(一) 对象和构造函数实例详解
Mar 03 Javascript
vue+ElementUI 关闭对话框清空验证,清除form表单的操作
Aug 06 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
WordPress中用于获取及自定义头像图片的PHP脚本详解
2015/12/17 PHP
PHP实现微信网页授权开发教程
2016/01/19 PHP
PHP中Trait及其应用详解
2017/02/14 PHP
Laravel实现定时任务的示例代码
2017/08/10 PHP
Laravel框架路由管理简单示例
2019/05/07 PHP
php实现session共享的实例方法
2019/09/19 PHP
用js实现计算代码行数的简单方法附代码
2007/08/13 Javascript
JQuery中的ready函数冲突的解决方法
2010/05/17 Javascript
EasySlider 基于jQuery功能强大简单易用的滑动门插件
2010/06/11 Javascript
javascript判断机器是否联网的2种方法
2013/08/09 Javascript
JS 打印界面的CSS居中代码适用所有浏览器
2014/03/19 Javascript
js如何调用qq互联api实现第三方登录
2014/03/28 Javascript
jQuery实现页面点击后退弹出提示框的方法
2016/08/24 Javascript
使用JavaScript实现alert的实例代码
2017/07/06 Javascript
react-router4 嵌套路由的使用方法
2017/07/24 Javascript
解读vue生成的文件目录结构及说明
2017/11/27 Javascript
koa源码中promise的解读
2018/11/13 Javascript
layui实现把数据表格时间戳转换为时间格式的例子
2019/09/12 Javascript
在vue中把含有html标签转为html渲染页面的实例
2019/10/28 Javascript
node.js基于dgram数据报模块创建UDP服务器和客户端操作示例
2020/02/12 Javascript
Angular8 简单表单验证的实现示例
2020/06/03 Javascript
[55:32]2018DOTA2亚洲邀请赛 4.4 淘汰赛 EG vs LGD 第二场
2018/04/05 DOTA
[02:19]2018年度DOTA2最佳核心位选手-完美盛典
2018/12/17 DOTA
数据挖掘之Apriori算法详解和Python实现代码分享
2014/11/07 Python
Python的字典和列表的使用中一些需要注意的地方
2015/04/24 Python
python判断windows系统是32位还是64位的方法
2015/05/11 Python
python实现上传下载文件功能
2020/11/19 Python
利用python解决mysql视图导入导出依赖的问题
2017/12/17 Python
Django admin model 汉化显示文字的实现方法
2019/08/12 Python
python使用openpyxl操作excel的方法步骤
2020/05/28 Python
在Python3.74+PyCharm2020.1 x64中安装使用Kivy的详细教程
2020/08/07 Python
LODI女鞋在线商店:阿利坎特的鞋类品牌
2019/02/15 全球购物
水产养殖学应届生求职信
2013/09/29 职场文书
科技节口号
2014/06/19 职场文书
2016春节放假通知范文
2015/08/18 职场文书
情况说明书怎么写
2015/10/08 职场文书