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

来源:脚本之家  责任编辑:小易  

微信小小签到中,每日打卡的作业,每天把每天的作业分别写上小小的签到组,这个功能我还是头一次听说的www.zgxue.com防采集请勿采集本网。

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

当然方便,没有手工签到、省去排长长的队伍,省去传统签到的流程,会议期间使用微信小程序扫描签到提高签到效率

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

有关签到有很多,但是在今天,我想推荐你一款强的,它就是鲸打卡。

先说说相关注意吧:

这个功能只能在后台进行设置,就是写一个规则进去,自动保存最新的10条数据,然后剩余的数据自动删除。如果有需要的话,可以找我哦。

其一就是 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.”前缀!

总结

以上所述是小编给大家介绍的微信小程序本地存储实现每日签到、连续签到功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对真格学网网站的支持!

如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

看起来现在签到很流行啊,在这里的话我就推荐你一个小程序吧,它的名字叫做鲸打卡,你可以去微信上搜一搜内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • 微信小程序 storage更新详解
  • 微信小程序结合storage实现搜索历史效果
  • 微信小程序实现留言板(storage)
  • localstorage实现便签小程序
  • 微信小程序 storage api实例详解
  • uni-app微信小程序登录并使用vuex存储登录状态的思路详解
  • 微信小程序实现写入读取缓存详解
  • 如何在微信小程序中存setstorage
  • js动态生成指定行数的表格
  • 关于javascript的gzip静态压缩方法
  • 小程序图片剪裁加旋转的示例代码
  • 纯js实现的积木(div层)拖动功能示例
  • javascript:google 向上向下滚动特效,兼容ie6,7,8,ff
  • javascript简单实现网页回到顶部功能
  • 如何使用headjs来管理和异步加载js
  • 微信小程序制作表格的方法
  • 微信小程序使用slider设置数据值及switch开关组件功能【附源码下
  • 生成无限制的微信小程序码的示例代码
  • 微信打卡签到小程序
  • 微信小小签到中每日打卡的作业怎么把每天的作业分别显示?
  • 在微信程序小小签到里,为什么已提交了作业?
  • 微信小程序我在校园签到后,后台还会时时定位吗?就是我想出门完去,还是就只是记录一下当时的位置?
  • 微信小程序扫描签到会议期间使用会方便吗
  • 有没有一个强大的签到打卡微信小程序
  • 微信小程序 怎么让本地存储只能存储最新10条数据
  • 微信小程序里的每天交作业要怎么才能把账号退出班级里?
  • 微信有好多公众号有签到,有什么软件可以每天自动签到
  • 微信怎么做个小程序,每天发布一些东西
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全基础知识javascript类库表单特效广告代码网页特效黑客性质javascript技巧domnode.jsjs其它首页javascript微信小程序 storage更新详解微信小程序结合storage实现搜索历史效果微信小程序实现留言板(storage)localstorage实现便签小程序微信小程序 storage api实例详解uni-app微信小程序登录并使用vuex存储登录状态的思路详解微信小程序实现写入读取缓存详解如何在微信小程序中存setstoragejs动态生成指定行数的表格关于javascript的gzip静态压缩方法小程序图片剪裁加旋转的示例代码纯js实现的积木(div层)拖动功能示例javascript:google 向上向下滚动特效,兼容ie6,7,8,ffjavascript简单实现网页回到顶部功能如何使用headjs来管理和异步加载js微信小程序制作表格的方法微信小程序使用slider设置数据值及switch开关组件功能【附源码下生成无限制的微信小程序码的示例代码js刷新页面方法大全js中settimeout()的用法详解js截取字符串常用方法详细整理js页面跳转常用的几种方式js打开新窗口的2种方式js数组与字符串的相互转换方法js设置cookie、读取cookie、删除js删除数组里的某个元素方法js 将json字符串转换为json对象的javascript深入理解js闭包搞定immutable.js详细说明js识别不同浏览器基于useragent做判断js实现tab选项卡函数代码js日期范围初始化得到前一个月日期的方法当前流行的javascript代码风格指南基于es6三点运算符的使用方法(实例讲解)微信小程序扫描二维码获取信息实例详解js实现的自定义显示加载等待图片插件(loajavascript实现页面滚动图片加载(仿lazyljavascript圆盘抽奖程序实现原理和完整代
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved