经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » JavaScript » 查看文章
微信小程序本地存储实现每日签到、连续签到功能
来源:jb51  时间:2019/10/9 10:40:09  对本文有异议

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

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

先说说相关注意吧:

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

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

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

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

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

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

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

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

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

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

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

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

下面放上示例代码:

hello.wxml

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

hello.wxss

  1. .container{
  2. background-color: ghostwhite;
  3. width: 100%;
  4. height: 100%;
  5. flex-direction: column;
  6. display: flex;
  7. align-items: center;
  8. min-height: 100vh;
  9. }
  10. .mxc1{
  11. position: relative;
  12. width: 100%;
  13. height: 400rpx;
  14. border-top: 1px solid #000;
  15. border-bottom: 1px solid #000;
  16. margin-top: -70rpx;
  17. flex-direction: column;
  18. display: flex;
  19. align-items: center;
  20. background-color: #efeff4;
  21. }
  22. .mxc1 text{
  23. font-size: 30rpx;
  24. font-weight: bold;
  25. line-height: 400rpx;
  26. }
  27. .mxc2-1{
  28. position: absolute;
  29. width: 60%;
  30. height: 74rpx;
  31. border: 1px solid rgba(247, 2, 2, 0.959);
  32. background-color: rgba(247, 2, 2, 0.959);
  33. border-radius: 3px;
  34. flex-direction: column;
  35. display: flex;
  36. align-items: center;
  37. margin-top: 396rpx;
  38. }
  39. .mxc2-1 text{
  40. color: white;
  41. font-size: 32rpx;
  42. line-height: 74rpx;
  43. }
  44. .mxc2-2{
  45. position: absolute;
  46. width: 60%;
  47. height: 74rpx;
  48. border: 1px solid rgba(182, 177, 177, 0.959);
  49. background-color: rgba(182, 177, 177, 0.959);
  50. border-radius: 3px;
  51. flex-direction: column;
  52. display: flex;
  53. align-items: center;
  54. margin-top: 396rpx;
  55. }
  56. .mxc2-2 text{
  57. color: #000;
  58. font-size: 32rpx;
  59. line-height: 74rpx;
  60. }

hello.js

  1. Page({
  2. data:{
  3. firstTime:'0',
  4. flag:true
  5. },
  6. onBindTap:function(){
  7. var D=(new Date()).getDate().toString();
  8. if(D != wx.getStorageSync('D')){
  9. wx.setStorageSync('D', D);
  10. wx.setStorage({
  11. key: 'FirstTime',
  12. data: (parseInt(this.data.firstTime) + 1).toString(),
  13. })
  14. var that = this;
  15. var firstTime = wx.getStorage({
  16. key: 'FirstTime',
  17. success: function (res) {
  18. that.setData({
  19. firstTime: res.data,
  20. flag:false
  21. })
  22. wx.showToast({
  23. title: '签到成功!',
  24. icon: 'success',
  25. duration: 1200,
  26. mask: true
  27. })
  28. },
  29. })
  30. }else{
  31. wx.showToast({
  32. title: '今日打卡已完成!',
  33. icon:'loading',
  34. duration:1200,
  35. mask:true
  36. })
  37. }
  38. },
  39. onShow:function(options){
  40. var that = this;
  41. var firstTime = wx.getStorage({
  42. key: 'FirstTime',
  43. success: function (res) {
  44. that.setData({
  45. firstTime: res.data
  46. })
  47. },
  48. })
  49. var D = (new Date()).getDate().toString();
  50. if (D != wx.getStorageSync('D')){
  51. this.setData({
  52. flag:true
  53. })
  54. }else{
  55. this.setData({
  56. flag:false
  57. })
  58. }
  59. },
  60. })

hello.json

  1. {
  2. "navigationBarTitleText": "签到",
  3. "navigationBarTextStyle": "black",
  4. "navigationBarBackgroundColor": "ghostwhite"
  5. }

扩展时刻:

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

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

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

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

在点击事件onBindTap里:

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

易错点提示:

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

那有没有人想过 只写firstTime?

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

总结

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

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号