微信小程序本地存儲實(shí)現(xiàn)每日簽到、連續(xù)簽到功能
昨天在看自己寫的小程序項(xiàng)目,無意中打開了CSDN APP,突然間覺得,我去,如果在小程序中加個“簽到”功能,豈不美哉?。ê冒?,其實(shí)是買的書昨天沒到貨,然后閑著無事,就想起了大明湖畔的“簽到”)
但是吧,又不想寫和服務(wù)器交互的,本著“簡單點(diǎn)”的原則,我想起了曾經(jīng)的摯愛—— 本地存儲 。
先說說相關(guān)注意吧:
其一就是 storage中只能存放字符串!
我去,昨晚大部分時間都是在搞這個。以前一直認(rèn)為存放的是對象,興致勃勃寫完發(fā)現(xiàn)點(diǎn)擊以后出現(xiàn)了“NAN”…
覺得 事情并沒有這么簡單。
仔細(xì)回去看了一下曾經(jīng)Vue寫過的localStorage,發(fā)現(xiàn)一直弄錯了,應(yīng)該存放字符串!
搞清楚這個以后,又有一個問題:你要“ 點(diǎn)擊加1 ”,這里總是把數(shù)字和字符串弄反,甚至想了用數(shù)組形式存放。。。最終想到了解決辦法:把存放的字符串轉(zhuǎn)為數(shù)字,加1后再轉(zhuǎn)為字符串存放到storage中 。
想到這我不禁喜形于色,終于可以了!
但是當(dāng)我無意中狂點(diǎn)16下的時候,我又哭了…
new Date()函數(shù)控制日期——一分鐘/一天/…只能點(diǎn)一次:
var D=(new Date()).getDate().toString(); if(D != wx.getStorageSync('D')){ //判斷是否過了當(dāng)天 //如果是新的一天,則... }else{ //否則,例如: wx.showToast({ title: '今日打卡已完成!', icon:'loading', duration:1200, mask:true }) }
這里又出現(xiàn)一個問題,我在當(dāng)前頁面開始時onLoad里面加了一段代碼:把當(dāng)前時間存放到storage中,但是我發(fā)現(xiàn),這樣以后就點(diǎn)不了了(當(dāng)天),為什么?
因?yàn)闆_突了啊,加載頁面時存放此時時間,那么你如果在這個事件內(nèi)(本例:一天)去點(diǎn)擊,如上面代碼第一、二行,它不成立——都是“今天”,所以會執(zhí)行else語句。
解決辦法: 去掉onLoad函數(shù),這樣開始執(zhí)行if時候會發(fā)現(xiàn)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" }
擴(kuò)展時刻:
剛剛實(shí)現(xiàn)了簡單的簽到功能,那么,怎么實(shí)現(xiàn)連續(xù)簽到呢?
我想了一晚上,因?yàn)閯傞_始時思路跑到了“誤區(qū)”——判斷點(diǎn)擊后加1的事件是否匹配。但是你點(diǎn)擊后加1是個被動事件,唯一條件就是點(diǎn)擊,拿這個判斷豈不是很難受?
于是,我們同樣可以用parseInt()函數(shù)來把當(dāng)前日期(時間)和緩存日期(時間)作比較 ,判斷他們是否滿足:
var D=(new Date()).getDate().toString();
在點(diǎn)擊事件onBindTap里:
var DT=wx.getStorageSync('D'); if(parseInt(D)!=parseInt(DT)+1){ //非連續(xù)簽到 對應(yīng)的操作 }else{ //連續(xù)簽到 }
易錯點(diǎn)提示:
上面 hello.js 代碼中有這么一行:this.data.firstTime
那有沒有人想過 只寫firstTime?
小程序中用data中的數(shù)據(jù)(變量)必須加上“this.data.”前綴!
總結(jié)
以上所述是小編給大家介紹的微信小程序本地存儲實(shí)現(xiàn)每日簽到、連續(xù)簽到功能,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
如果你覺得本文對你有幫助,歡迎轉(zhuǎn)載,煩請注明出處,謝謝!
相關(guān)文章
JavaScript自動設(shè)置IFrame高度的小例子
JavaScript自動設(shè)置IFrame高度的小例子,需要的朋友可以參考一下2013-06-06setInterval計(jì)時器不準(zhǔn)的問題解決方法
在js中如果打算使用setInterval進(jìn)行倒數(shù),計(jì)時等功能,往往是不準(zhǔn)確的,針對這個問題,本文有個不錯的解決方案2014-05-05