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


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 相关文章推荐
JAVASCRIPT对象及属性
Feb 13 Javascript
使用js 设置url参数
Jul 08 Javascript
JS下载文件|无刷新下载文件示例代码
Apr 17 Javascript
chrome下jq width()方法取值为0的解决方法
May 26 Javascript
JS实现鼠标点击展开或隐藏表格行的方法
Mar 03 Javascript
JS实现的N多简单无缝滚动代码(包含图文效果)
Nov 06 Javascript
AngularJS教程之简单应用程序示例
Aug 16 Javascript
详解AngularJS ui-sref的简单使用
Apr 24 Javascript
在nginx上部署vue项目(history模式)的方法
Dec 28 Javascript
Vue不能观察到数组length的变化
Jun 08 Javascript
微信小程序结合Storage实现搜索历史效果
May 18 Javascript
微信小程序用户授权弹窗 拒绝时引导用户重新授权实现
Jul 29 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
.htaccess文件保护实例讲解
2011/02/06 PHP
PHP基础陷阱题(变量赋值)
2012/09/12 PHP
php求两个目录的相对路径示例(php获取相对路径)
2014/03/27 PHP
Symfony2框架学习笔记之表单用法详解
2016/03/18 PHP
微信企业转账之入口类分装php代码
2018/10/01 PHP
Laravel框架实现的上传图片到七牛功能详解
2019/09/06 PHP
vs2003 js文件编码问题的解决方法
2010/03/20 Javascript
JS小功能(offsetLeft实现图片滚动效果)实例代码
2013/11/28 Javascript
跨域传值即主页面与iframe之间互相传值
2013/12/09 Javascript
JavaScript编写推箱子游戏
2015/07/07 Javascript
Svg.js实例教程及使用手册详解(一)
2016/05/16 Javascript
JSON与String互转的实现方法(Javascript)
2016/09/27 Javascript
微信小程序  http请求封装详解及实例代码
2017/02/15 Javascript
node实现生成带参数的小程序二维码并保存到本地功能示例
2018/12/05 Javascript
javascript中call,apply,callee,caller用法实例分析
2019/07/24 Javascript
JS组件库AlloyTouch实现图片轮播过程解析
2020/05/29 Javascript
Python中使用装饰器时需要注意的一些问题
2015/05/11 Python
Python使用微信SDK实现的微信支付功能示例
2017/06/30 Python
基于DataFrame改变列类型的方法
2018/07/25 Python
python得到qq句柄,并显示在前台的方法
2018/10/14 Python
实时获取Python的print输出流方法
2019/01/07 Python
python安装requests库的实例代码
2019/06/25 Python
简单了解python的break、continue、pass
2019/07/08 Python
详解如何用TensorFlow训练和识别/分类自定义图片
2019/08/05 Python
基于Tensorflow使用CPU而不用GPU问题的解决
2020/02/07 Python
python GUI库图形界面开发之PyQt5日期时间控件QDateTimeEdit详细使用方法与实例
2020/02/27 Python
python GUI库图形界面开发之PyQt5打印控件QPrinter详细使用方法与实例
2020/02/28 Python
scrapy爬虫:scrapy.FormRequest中formdata参数详解
2020/04/30 Python
Python获取指定网段正在使用的IP
2020/12/14 Python
毕业实习个人鉴定范文
2013/12/10 职场文书
写给保洁员表扬信
2014/01/08 职场文书
中年人生感言
2014/02/04 职场文书
高一数学教学反思
2014/02/07 职场文书
给老师的检讨书
2014/02/11 职场文书
民主生活会对照检查材料范文
2014/10/01 职场文书
研究生毕业论文导师评语
2014/12/31 职场文书