1.昨天在看自己写的小程序项目，无意中打开了CSDNAPP，突然间觉得，我去，如果在小程序中加个“签到”功能，岂不美哉！（好吧，其实是买的书昨天没到货，然后闲着无事，就想起了大明湖畔的“签到”）

2.但是吧，又不想写和服务器交互的，本着“简单点”的原则，我想起了曾经的挚爱——本地存储。

3.先说说相关注意吧：其一就是storage中只能存放字符串！我去，昨晚大部分时间都是在搞这个。以前一直认为存放的是对象，兴致勃勃写完发现点击以后出现了“NAN”…觉得事情并没有这么简单。仔细回去看了一下曾经Vue写过的localStorage，发现一直弄错了，应该存放字符串！

开篇

4.搞清楚这个以后，又有一个问题：你要“点击加1”，这里总是把数字和字符串弄反，甚至想了用数组形式存放。。。最终想到了解决办法：把存放的字符串转为数字，加1后再转为字符串存放到storage中。

5.想到这我不禁喜形于色，终于可以了！

wx.setStorage({key:'FirstTime',data:(parseInt(this.data.firstTime)+1).toString(),})

6.但是当我无意中狂点16下的时候，我又哭了…

7.newDate()函数控制日期——一分钟/一天/…只能点一次：

varD=(newDate()).getDate().toString();if(D!=wx.getStorageSync('D')){//判断是否过了当天//如果是新的一天，则...}else{//否则，例如：wx.showToast({title:'今日打卡已完成！',icon:'loading',duration:1200,mask:true})}

8.这里又出现一个问题，我在当前页面开始时onLoad里面加了一段代码：把当前时间存放到storage中，但是我发现，这样以后就点不了了（当天），为什么？因为冲突了啊，加载页面时存放此时时间，那么你如果在这个事件内（本例：一天）去点击，如上面代码第一、二行，它不成立——都是“今天”，所以会执行else语句。

9.解决办法：去掉onLoad函数，这样开始执行if时候会发现storage中没有存储，也就“!=”了。

10.下面放上示例代码：hello.wxml

viewclass="container"viewclass="mxc1"text您已签到{{firstTime}}次/text/viewviewclass="{{flag?'mxc2-1':'mxc2-2'}}"bindtap="onBindTap"disabled="{{flag}}"text我要签到/text/view/view

11.disabled——小程序禁用事件！

12.hello.wxss

.container{background-color:ghostwhite;width:100%;height:100%;flex-direction:column;display:flex;align-items:center;min-height:100vh;}.mxc1{position:relative;width:100%;height:400rpx;border-top:1pxsolid#000;border-bottom:1pxsolid#000;margin-top:-70rpx;flex-direction:column;display:flex;align-items:center;background-color:#efeff4;}.mxc1text{font-size:30rpx;font-weight:bold;line-height:400rpx;}.mxc2-1{position:absolute;width:60%;height:74rpx;border:1pxsolidrgba(247,2,2,0.959);background-color:rgba(247,2,2,0.959);border-radius:3px;flex-direction:column;display:flex;align-items:center;margin-top:396rpx;}.mxc2-1text{color:white;font-size:32rpx;line-height:74rpx;}.mxc2-2{position:absolute;width:60%;height:74rpx;border:1pxsolidrgba(182,177,177,0.959);background-color:rgba(182,177,177,0.959);border-radius:3px;flex-direction:column;display:flex;align-items:center;margin-top:396rpx;}.mxc2-2text{color:#000;font-size:32rpx;line-height:74rpx;}

13.hello.js

Page({data:{firstTime:'0',flag:true},onBindTap:function(){varD=(newDate()).getDate().toString();if(D!=wx.getStorageSync('D')){wx.setStorageSync('D',D);wx.setStorage({key:'FirstTime',data:(parseInt(this.data.firstTime)+1).toString(),})varthat=this;varfirstTime=wx.getStorage({key:'FirstTime',success:function(res){that.setData({firstTime:res.data,flag:false})wx.showToast({title:'签到成功！',icon:'success',duration:1200,mask:true})},})}else{wx.showToast({title:'今日打卡已完成！',icon:'loading',duration:1200,mask:true})}},onShow:function(options){varthat=this;varfirstTime=wx.getStorage({key:'FirstTime',success:function(res){that.setData({firstTime:res.data})},})varD=(newDate()).getDate().toString();if(D!=wx.getStorageSync('D')){this.setData({flag:true})}else{this.setData({flag:false})}},})

14.hello.json

{"navigationBarTitleText":"签到","navigationBarTextStyle":"black"}扩展时刻

15.刚刚实现了简单的签到功能，那么，怎么实现连续签到呢？我想了一晚上，因为刚开始时思路跑到了“误区”——判断点击后加1的事件是否匹配。但是你点击后加1是个被动事件，唯一条件就是点击，拿这个判断岂不是很难受？于是，我们同样可以用parseInt()函数来把当前日期（时间）和缓存日期（时间）作比较，判断他们是否满足：

varD=(newDate()).getDate().toString();

16.在点击事件onBindTap里：

varDT=wx.getStorageSync('D');if(parseInt(D)!=parseInt(DT)+1){//非连续签到对应的操作}else{//连续签到}

17.易错点提示：上面hello.js代码中有这么一行：this.data.firstTime那有没有人想过只写firstTime？小程序中用data中的数据（变量）必须加上“this.data.”前缀！

扩展：第三方插件实现小程序“心情签到”功能开发（新）

18.为什么要增加这么一个功能？因为笔者近期发现了一个非常好玩的插件：日历插件，而众所周知，某日心情最重要的就是“日历”了。在小程序内使用插件需要经过下面三步。

在小程序管理后台添加三方服务插件登录小程序管理后台，依次进入「设置-第三方服务」搜索日历插件的AppID（wx92c68dae5a8bb046）就可以搜索到「极点日历」，这时候申请授权即可。在app.json中增加插件配置第二步是在项目的app.json中增加plugins字段内容："plugins":{"calendar":{"version":"1.1.3","provider":"wx92c68dae5a8bb046"}}在diary页面增加组件配置在pages/diary/index.json的页面配置中的usingComponents里增加calendar的插件地址：{"usingComponents":{"calendar":"plugin://calendar/calendar","icon":"../../components/icon/index"}}

19.经过上面三步之后，我们就可以在页面中使用calendar/标签了：在心情设置上，笔者设计了5种心情，由5种颜色来表示，具体数值如下：

//client/pages/diary/index.js-Page-dataemotions:['serene','hehe','ecstatic','sad','terrified'],colors:{serene:'#64d9fe',hehe:'#d3fc1e',ecstatic:'#f7dc0e',sad:'#ec238a',terrified:'#ee1aea'}

20.签到不同的心情，最终在日历上会展现出下面的效果：要在某天设置该天的背景颜色，需要使用日历的days-color属性，这里笔者将days-color与daysStyle进行绑定：

!--diary/index.wxml--calendardays-color="{{daysStyle}}"/

21.daysStyle的计算和赋值是在setCalendarColor方法内的：

//diary/index.jssetCalendarColor(year,month){year=year||newDate().getFullYear()month=month||newDate().getMonth()+1//从数据库读取数据getEmotionByOpenidAndDate(this.data.openid,year,month).then((r)={constdata=r.data||[]conststyles=[]constnow=newDate()consttoday=dateFormat(now)lettodayEmotion=''letcolors=this.data.colors//遍历日期，存在表情的日期则设置对应的颜色data.forEach((v)={letts=v.tsModifiedletdate=newDate(ts)letday=date.getDate()if(today===dateFormat(date)){todayEmotion=v.emotion||''}styles.push({month:'current',day,color:'black',background:colors[v.emotion]})})//设置daysStylethis.setData({lastMonth:`${year}-${('00'+month).slice(-2)}`,showPublish:true,todayEmotion,daysStyle:styles})}).catch((e)={wx.showToast({title:'加载已签数据失败，请稍后再试',icon:'none',duration:3000})})}