微信小程序实现签到功能


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实现检测浏览器及版本的脚本代码
Jan 22 Javascript
THREE.JS入门教程(3)着色器-下
Jan 24 Javascript
jquery 追加tr和删除tr示例代码
Sep 12 Javascript
js实现兼容性好的微软官网导航下拉菜单效果
Sep 07 Javascript
jstl中判断list中是否包含某个值的简单方法
Oct 14 Javascript
jQuery 插件封装的方法
Nov 16 Javascript
巧用Javascript的逻辑运算符
Dec 02 Javascript
使用JS实现图片轮播的实例(前后首尾相接)
Sep 21 Javascript
vue生命周期和react生命周期对比【推荐】
Sep 19 Javascript
微信小程序常见页面跳转操作简单示例
May 01 Javascript
Javascript如何递归遍历本地文件夹
Aug 06 Javascript
vue vant中picker组件的使用
Nov 03 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
Zerg基本策略
2020/03/14 星际争霸
mysql_fetch_assoc和mysql_fetch_row的功能加起来就是mysql_fetch_array
2007/01/15 PHP
php 保留小数点
2009/04/21 PHP
PHP文件锁函数flock()详细介绍
2014/11/18 PHP
PHP SFTP实现上传下载功能
2017/07/26 PHP
php实现的证件照换底色功能示例【人像抠图/换背景图】
2020/05/29 PHP
event.srcElement 用法笔记e.target
2009/12/18 Javascript
JavaScript获取页面上某个元素的代码
2011/03/13 Javascript
实用的Jquery选项卡TAB示例代码
2013/08/28 Javascript
javascript中数组中求最大值示例代码
2013/12/18 Javascript
node.js中的events.EventEmitter.listenerCount方法使用说明
2014/12/08 Javascript
如何在Linux上安装Node.js
2016/04/01 Javascript
require简单实现单页应用程序(SPA)
2016/07/12 Javascript
微信小程序 教程之数据绑定
2016/10/18 Javascript
利用JS实现点击按钮后图片自动切换的简单方法
2016/10/24 Javascript
URL的参数中有加号传值变为空格的问题(URL特殊字符)
2016/11/04 Javascript
详解百度百科目录导航树小插件
2017/01/08 Javascript
防止页面url缓存中ajax中post请求的处理方法
2017/10/10 Javascript
基于jQuery解决ios10以上版本缩放问题
2017/11/03 jQuery
Angular实现下拉框模糊查询功能示例
2018/01/03 Javascript
Vue可自定义tab组件用法实例
2019/10/24 Javascript
vue data恢复初始化数据的实现方法
2019/10/31 Javascript
微信浏览器下拉黑边解决方案 wScroollFix
2020/01/21 Javascript
koa-passport实现本地验证的方法示例
2020/02/20 Javascript
Python算法之栈(stack)的实现
2014/08/18 Python
用Python解析XML的几种常见方法的介绍
2015/04/09 Python
在Python下进行UDP网络编程的教程
2015/04/29 Python
使用pygame模块编写贪吃蛇的实例讲解
2018/02/05 Python
python 输出所有大小写字母的方法
2019/01/02 Python
Django项目创建到启动详解(最全最详细)
2019/09/07 Python
python爬虫模拟浏览器访问-User-Agent过程解析
2019/12/28 Python
县政府班子个人对照检查材料
2014/10/05 职场文书
办理收楼委托书范本
2014/10/09 职场文书
《风娃娃》教学反思
2016/02/18 职场文书
Android基础入门之dataBinding的简单使用教程
2022/06/21 Java/Android
Redis配置外网可访问(redis远程连接不上)的方法
2022/12/24 Redis