微信小程序本地存储实现每日签到、连续签到功能


Posted in Javascript onOctober 09, 2019

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

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

先说说相关注意吧:

其一就是 storage中只能存放字符串!

我去,昨晚大部分时间都是在搞这个。以前一直认为存放的是对象,兴致勃勃写完发现点击以后出现了“NAN”…

觉得 事情并没有这么简单。

仔细回去看了一下曾经Vue写过的localStorage,发现一直弄错了,应该存放字符串!

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

想到这我不禁喜形于色,终于可以了!

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

new Date()函数控制日期——一分钟/一天/…只能点一次:

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

这里又出现一个问题,我在当前页面开始时onLoad里面加了一段代码:把当前时间存放到storage中,但是我发现,这样以后就点不了了(当天),为什么?

因为冲突了啊,加载页面时存放此时时间,那么你如果在这个事件内(本例:一天)去点击,如上面代码第一、二行,它不成立——都是“今天”,所以会执行else语句。

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

下面放上示例代码:

hello.wxml

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

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: 1px solid #000;
 border-bottom: 1px solid #000;
 margin-top: -70rpx;
 flex-direction: column;
 display: flex;
 align-items: center;
 background-color: #efeff4;
}
.mxc1 text{
 font-size: 30rpx;
 font-weight: bold;
 line-height: 400rpx;
}
.mxc2-1{
 position: absolute;
 width: 60%;
 height: 74rpx;
 border: 1px solid rgba(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-1 text{
 color: white;
 font-size: 32rpx;
 line-height: 74rpx;
}
.mxc2-2{
 position: absolute;
 width: 60%;
 height: 74rpx;
 border: 1px solid rgba(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-2 text{
 color: #000;
 font-size: 32rpx;
 line-height: 74rpx;
}

hello.js

Page({
 data:{
 firstTime:'0',
 flag:true
 },
 onBindTap:function(){
 var D=(new Date()).getDate().toString();
 if(D != wx.getStorageSync('D')){
  wx.setStorageSync('D', D);
  wx.setStorage({
  key: 'FirstTime',
  data: (parseInt(this.data.firstTime) + 1).toString(),
  })
  var that = this;
  var firstTime = 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){
 var that = this;
 var firstTime = wx.getStorage({
  key: 'FirstTime',
  success: function (res) {
  that.setData({
   firstTime: res.data
  })
  },
 })
 var D = (new Date()).getDate().toString();
 if (D != wx.getStorageSync('D')){
  this.setData({
  flag:true
  })
 }else{
  this.setData({
  flag:false
  })
 }
 },
})

hello.json

{
 "navigationBarTitleText": "签到",
 "navigationBarTextStyle": "black",
 "navigationBarBackgroundColor": "ghostwhite"
}

扩展时刻:

刚刚实现了简单的签到功能,那么,怎么实现连续签到呢?

我想了一晚上,因为刚开始时思路跑到了“误区”——判断点击后加1的事件是否匹配。但是你点击后加1是个被动事件,唯一条件就是点击,拿这个判断岂不是很难受?

于是,我们同样可以用parseInt()函数来把当前日期(时间)和缓存日期(时间)作比较 ,判断他们是否满足:

var D=(new Date()).getDate().toString();

在点击事件onBindTap里:

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

易错点提示:

上面 hello.js 代码中有这么一行:this.data.firstTime

那有没有人想过 只写firstTime?

小程序中用data中的数据(变量)必须加上“this.data.”前缀!

总结

以上所述是小编给大家介绍的微信小程序本地存储实现每日签到、连续签到功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
使用SyntaxHighlighter实现HTML高亮显示代码的方法
Feb 04 Javascript
使用Node.js实现一个简单的FastCGI服务器实例
Jun 09 Javascript
jquery插件hiAlert实现网页对话框美化
May 03 Javascript
高效利用Angular中内置服务$http、$location等
Mar 22 Javascript
AngularJS包括详解及示例代码
Aug 17 Javascript
jquery滚动条插件slimScroll使用方法
Feb 09 Javascript
JavaScript实现多态和继承的封装操作示例
Aug 20 Javascript
新手快速入门JavaScript装饰者模式与AOP
Jun 24 Javascript
layui table动态表头 改变表格头部 重新加载表格的方法
Sep 21 Javascript
createObjectURL方法实现本地图片预览
Sep 30 Javascript
使用Vue+Django+Ant Design做一个留言评论模块的示例代码
Jun 01 Javascript
React中的Context应用场景分析
Jun 11 Javascript
Vue.js实现大转盘抽奖总结及实现思路
Oct 09 #Javascript
js基础之事件捕获与冒泡原理
Oct 09 #Javascript
微信内置浏览器图片查看器的代码实例
Oct 08 #Javascript
vue封装swiper代码实例解析
Oct 08 #Javascript
jQuery实现提交表单时不提交隐藏div中input的方法
Oct 08 #jQuery
简单实现节流函数和防抖函数过程解析
Oct 08 #Javascript
微信小程序返回箭头跳转到指定页面实例解析
Oct 08 #Javascript
You might like
Zend Framework框架路由机制代码分析
2016/03/22 PHP
Yii2 加载css、js 载静态资源的方法
2017/03/10 PHP
PDO::setAttribute讲解
2019/01/29 PHP
jquery 的 $(&quot;#id&quot;).html() 无内容的解决方法
2010/06/07 Javascript
JS滚轮事件onmousewheel使用介绍
2013/11/01 Javascript
js将控件隐藏及display属性的使用介绍
2013/12/30 Javascript
使用jquery animate创建平滑滚动效果(可以是到顶部、到底部或指定地方)
2014/05/27 Javascript
JavaScript的arguments对象应用示例
2014/09/15 Javascript
JS是按值传递还是按引用传递
2015/01/30 Javascript
Shell脚本实现Linux系统和进程资源监控
2015/03/05 Javascript
jQuery实现首页顶部可伸缩广告特效代码
2015/04/15 Javascript
详解JavaScript中localStorage使用要点
2016/01/13 Javascript
jQuery基本选择器(实例及表单域value的获取方法)
2016/05/20 Javascript
详细总结Javascript中的焦点管理
2016/09/17 Javascript
正则表达式替换html元素属性的方法
2016/11/26 Javascript
nodejs中模块定义实例详解
2017/03/18 NodeJs
Vue + Element UI图片上传控件使用详解
2019/08/20 Javascript
[49:08]FNATIC vs Infamous 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
Python实现快速排序和插入排序算法及自定义排序的示例
2016/02/16 Python
Python中is与==判断的区别
2017/03/28 Python
python 读取dicom文件,生成info.txt和raw文件的方法
2019/01/24 Python
django数据模型on_delete, db_constraint的使用详解
2019/12/24 Python
Python字符编码转码之GBK,UTF8互转
2020/02/09 Python
解决jupyter notebook 前面书写后面内容消失的问题
2020/04/13 Python
迷你分体式空调:SoGoodToBuy
2018/08/07 全球购物
J2SDK1.5与J2SDK5.0有什么区别
2012/09/19 面试题
同步和异步有何异同,在什么情况下分别使用他们?举例说明
2014/02/27 面试题
MIS软件工程师的面试题
2016/04/22 面试题
北体毕业生求职信
2014/02/28 职场文书
诉前财产保全担保书
2014/05/20 职场文书
化学专业自荐信
2014/05/28 职场文书
档案接收函格式
2015/01/30 职场文书
挂职锻炼工作总结2015
2015/05/28 职场文书
css display table 自适应高度、宽度问题的解决
2021/05/07 HTML / CSS
MySQL 使用索引扫描进行排序
2021/06/20 MySQL
Java数组与堆栈相关知识总结
2021/06/29 Java/Android