小程序云开发实现签到

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_36570464/article/details/82704545

此代码有严重的bug

(现在发现有bug,时间:2018年10月15日20:20:46,以后再改)

最近,小程序云开发来了,结合云开发我实现了一个签到功能。奈何技术不够,弄了大半天。

好,,我们进入正题:

签到功能--

     我的想法:

1.结合云开发数据库特点,当点击敲签到时 -向数据库插入记录来记录那天签到了。

2.进入签到详细页面,获取数据库里的记录,进行相应的算法设计(见下面详细设计)进行判断那天签到了,并显示出来。

(这里感谢两位大佬,1.部分ui 用的是:https://color.weilanwl.com

                                   2.日历显示用的是:https://blog.csdn.net/qq_24308471/article/details/79481118博主)

首先先看一下我的效果:

        

3.详细设计:

3.1 点击签到向数据库插入数据

Singnin:function(){
    //先判断是否登录
    if(this.data.userInfo!='点击登录'){
      var myDate = new Date();   //获得当前时间
      if((myDate.getMonth()+1)<10){
        var yu ='0'+ (myDate.getMonth()+1);
      }else{
        var yu =''+ (myDate.getMonth()+1);
      }
      if(myDate.getDate()<10){
        var ri ='0'+ (myDate.getDate());
      }else{
        var ri =''+ (myDate.getDate());
      }
      const db = wx.cloud.database()    //引用数据库
      //签到数据存入数据库
      db.collection('signin').add({
        // data 字段表示需新增的 JSON 数据
        data: {
           _id: 'id_'+myDate.getFullYear()+yu+ri, // 可选自定义 _id,在此处场景下用数据库自动分配的就可以了
          date: new Date(""+myDate.getFullYear()+'-'+yu+'-'+ri),    //签到时间
          done: true                    //是否签到
        },
        success: function(res) {
          // res 是一个对象,其中有 _id 字段标记刚创建的记录的 id
          console.log("数据插入成功")
        },
        fail: function(res){
          console.log("数据插入失败")
        }
      })

      //跳到签到详细页
      wx.navigateTo({
        url: '../../pages/SignIn/SignIn'
      })

    }else{
      wx.showModal({
        title:'请先登录',
        content:'请先登录再签到'
      })
    }
  
  }

插入数据主要有:_id (_id: 'id_'+myDate.getFullYear()+yu+ri, // 用当前年月日来作为id) ,那天签到 date,done  判断是否签到  (其实有点多余,因为签到栏就插入了当天时间,这个没有必要) 。

3.2  获取数据


//index.js
//获取应用实例
const app = getApp()
 
Page({
  data: {
		year: 0,
		month: 0,
		date: ['日', '一', '二', '三', '四', '五', '六'],
		dateArr: [],
		isToday: 0,
		isTodayWeek: false,
		todayIndex: 0,
		showLoading: true,   //加载中
		dateR:[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,]
	},
	
  onLoad: function () {
		let now = new Date();
		let year = now.getFullYear();
		let month = now.getMonth() + 1;
		this.dateInit();
		this.setData({
			year: year,
			month: month,
			isToday: '' + year + month + now.getDate()
		})

	this.setData({
		showLoading: false,   //加载中
	})
	var that = this;
	const db = wx.cloud.database()    //引用数据库
    db.collection('signin').get({      //数据读取,查询签到的记录,保存到 ResD中
      success: function (res) {
        // res.data 包含该记录的数据
		console.log(res.data)
		that.setData({
			ResD:res.data
		})
		
		/**签到算法设计:
		 * 
		 * 1.点击签到时向数据库里插入数据。
		 * 2.加载签到页面获取数据,并把数据保存到 ResD 。
		 * 3.用dateR(保存了当前月那天签到了) 来 与 dateArr需要遍历的日历数组数据 进行比较。
		 *    -->
		 * 详细步骤:
		 * 1.先获得1号对应的星期几,再获得日历最后一天所在的位置。
		 * 2.获得数据库记录中id 的长度,再用字符串截取倒数两位表示该月的几号(数据库里的记录id 就是日期)
		 * 3.用两个计数器,i 用来记录 日历从第一个位置到日历最后一天所在的位置, j 用来记录从数据库里获得的记录下标
		 * 4.利用for循环赋值, parseInt(   (that.data.ResD[j++]._id).substring(i_j-2,i_j)--截取     )--转换  ,
		 *    把RseD 中 _id 最后两位转换截取,并转换为数字。  然后把parseInt((that.data.ResD[j++]._id).substring(i_j-2,i_j))
		 * 	  赋值给签到的位置。
		 * 5.签到的位置为:that.data.startWeek 1号对应的星期几 加上 签到的号数 parseInt((that.data.ResD[j++]._id).substring(i_j-2,i_j)) 
		 * 6.最后在wxml 页面通过 id与当天所在位置 比较(item.dateNum==dateR[index])   来显示用户那天签到了
		 */
		var i_j = that.data.ResD[0]._id.length;    //  数据库记录中id 的长度
		var j = 0;             //用来计数签到的天
		for(var i = that.data.arrLen-1;i >= 0;i--){

			that.data.dateR[(that.data.startWeek+ parseInt(((that.data.ResD[j]._id).substring(i_j-2,i_j)-1)))] 
			= parseInt((that.data.ResD[j++]._id).substring(i_j-2,i_j))    //赋值
			that.setData({
				dateR:that.data.dateR
			})	
		} 
		
      }
	})
			
			
			
  },
  dateInit: function(setYear,setMonth){
		//全部时间的月份都是按0~11基准,显示月份才+1
		let dateArr = [];						//需要遍历的日历数组数据
		let arrLen = 0;							//dateArr的数组长度
		let now = setYear ? new Date(setYear,setMonth) : new Date();
		let year = setYear || now.getFullYear();
		let nextYear = 0;
		let month = setMonth || now.getMonth();					//没有+1方便后面计算当月总天数
		let nextMonth = (month + 1) > 11 ? 1 : (month + 1);		
		let startWeek = new Date( year+','+(month + 1)+','+1).getDay();							//目标月1号对应的星期
		let dayNums = new Date(year,nextMonth,0).getDate();				//获取目标月有多少天
		let obj = {};		
		let num = 0;
		
		if(month + 1 > 11){
			nextYear = year + 1;
			dayNums = new Date(nextYear,nextMonth,0).getDate();
		}
		arrLen = startWeek + dayNums;
		for(let i = 0; i < arrLen; i++){
			if(i >= startWeek){
				num = i - startWeek + 1;
				obj = {
					isToday: '' + year + (month + 1) + num,
					dateNum: num,  
				}
			}else{
				obj = {};
			}
			dateArr[i] = obj;
		}
		this.setData({
			dateArr: dateArr
		})
		this.setData({
			arrLen:arrLen,                      //日历最后一天所在的位置,
			startWeek:startWeek                             ////目标月1号对应的星期
		})
 
		let nowDate = new Date();
		let nowYear = nowDate.getFullYear();
		let nowMonth = nowDate.getMonth() + 1;
		let nowWeek = nowDate.getDay();
		let getYear = setYear || nowYear;
		let getMonth = setMonth >= 0 ? (setMonth + 1) : nowMonth;
 
		if (nowYear == getYear && nowMonth == getMonth){
			this.setData({
				isTodayWeek: true,
				todayIndex: nowWeek
			})
		}else{
			this.setData({
				isTodayWeek: false,
				todayIndex: -1
			})
		}
	},
	lastMonth: function(){
		//全部时间的月份都是按0~11基准,显示月份才+1
		let year = this.data.month - 2 < 0 ? this.data.year - 1 : this.data.year;
		let month = this.data.month - 2 < 0 ? 11 : this.data.month - 2;
		this.setData({
			year: year,
			month: (month + 1)
		})
		this.dateInit(year,month);
	},
	nextMonth: function(){
		//全部时间的月份都是按0~11基准,显示月份才+1
		let year = this.data.month > 11 ? this.data.year + 1 : this.data.year;
		let month = this.data.month > 11 ? 0 : this.data.month;
		this.setData({
			year: year,
			month: (month + 1)
		})
		this.dateInit(year, month);
	}
})

这是签到页面的详细js 代码,其中还包括了我的详细设计:

        /**签到算法设计:

         *

         * 1.点击签到时向数据库里插入数据。

         * 2.加载签到页面获取数据,并把数据保存到 ResD 。

         * 3.用dateR(保存了当前月那天签到了) 来 与 dateArr需要遍历的日历数组数据 进行比较。

         * -->

         * 详细步骤:

         * 1.先获得1号对应的星期几,再获得日历最后一天所在的位置。

         * 2.获得数据库记录中id 的长度,再用字符串截取倒数两位表示该月的几号(数据库里的记录id 就是日期)

         * 3.用两个计数器,i 用来记录 日历从第一个位置到日历最后一天所在的位置, j 用来记录从数据库里获得的记录下标

         * 4.利用for循环赋值, parseInt( (that.data.ResD[j++]._id).substring(i_j-2,i_j)--截取 )--转换 ,

         * 把RseD 中 _id 最后两位转换截取,并转换为数字。 然后把parseInt((that.data.ResD[j++]._id).substring(i_j-2,i_j))

         *   赋值给签到的位置。

         * 5.签到的位置为:that.data.startWeek 1号对应的星期几 加上 签到的号数 parseInt((that.data.ResD[j++]._id).substring(i_j-2,i_j))

         * 6.最后在wxml 页面通过 id与当天所在位置 比较(item.dateNum==dateR[index]) 来显示用户那天签到了

         */

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

         

展开阅读全文

没有更多推荐了,返回首页