微信小程序本地存储实现每日签到、连续签到功能微信小程序本地存储实现每日签到、连续签到功能
昨天在看自己写的小程序项目，无意中打开了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;
weixin_38617413
- 粉丝: 6
- 资源: 929
我的内容管理
收起
- 我的资源
快来上传第一个资源
我的收益 登录查看自己的收益
我的积分
登录查看自己的积分
我的C币
登录后查看C币余额
我的收藏 
我的下载 
下载帮助
评论0