這篇文章主要介紹了微信小程序本地存儲(chǔ)怎么實(shí)現(xiàn)每日簽到、連續(xù)簽到功能的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡(jiǎn)單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇微信小程序本地存儲(chǔ)怎么實(shí)現(xiàn)每日簽到、連續(xù)簽到功能文章都會(huì)有所收獲，下面我們一起來(lái)看看吧。

銀州ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景，ssl證書(shū)未來(lái)市場(chǎng)廣闊！成為成都創(chuàng)新互聯(lián)公司的ssl證書(shū)銷售渠道，可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：13518219792（備注：SSL證書(shū)合作）期待與您的合作！

先說(shuō)說(shuō)相關(guān)注意吧：

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

我去，昨晚大部分時(shí)間都是在搞這個(gè)。以前一直認(rèn)為存放的是對(duì)象，興致勃勃寫(xiě)完發(fā)現(xiàn)點(diǎn)擊以后出現(xiàn)了“NAN”…

覺(jué)得 事情并沒(méi)有這么簡(jiǎn)單。

仔細(xì)回去看了一下曾經(jīng)Vue寫(xiě)過(guò)的localStorage，發(fā)現(xiàn)一直弄錯(cuò)了，應(yīng)該存放字符串！

搞清楚這個(gè)以后，又有一個(gè)問(wèn)題：你要“ 點(diǎn)擊加1 ”，這里總是把數(shù)字和字符串弄反，甚至想了用數(shù)組形式存放。。。最終想到了解決辦法：把存放的字符串轉(zhuǎn)為數(shù)字，加1后再轉(zhuǎn)為字符串存放到storage中 。

想到這我不禁喜形于色，終于可以了！

但是當(dāng)我無(wú)意中狂點(diǎn)16下的時(shí)候，我又哭了…

new Date()函數(shù)控制日期——一分鐘/一天/…只能點(diǎn)一次：

var D=(new Date()).getDate().toString();
 if(D != wx.getStorageSync('D')){ //判斷是否過(guò)了當(dāng)天
  //如果是新的一天，則...
 }else{
 //否則，例如：
  wx.showToast({
  title: '今日打卡已完成！',
  icon:'loading',
  duration:1200,
  mask:true
  })
 }

這里又出現(xiàn)一個(gè)問(wèn)題，我在當(dāng)前頁(yè)面開(kāi)始時(shí)onLoad里面加了一段代碼：把當(dāng)前時(shí)間存放到storage中，但是我發(fā)現(xiàn)，這樣以后就點(diǎn)不了了（當(dāng)天），為什么？

因?yàn)闆_突了啊，加載頁(yè)面時(shí)存放此時(shí)時(shí)間，那么你如果在這個(gè)事件內(nèi)（本例：一天）去點(diǎn)擊，如上面代碼第一、二行，它不成立——都是“今天”，所以會(huì)執(zhí)行else語(yǔ)句。

解決辦法： 去掉onLoad函數(shù)，這樣開(kāi)始執(zhí)行if時(shí)候會(huì)發(fā)現(xiàn)storage中沒(méi)有存儲(chǔ)，也就“!=”了。

下面放上示例代碼：

hello.wxml

 
 您已簽到 {{firstTime}} 次
 
 
 我要簽到
 

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í)刻：

剛剛實(shí)現(xiàn)了簡(jiǎn)單的簽到功能，那么，怎么實(shí)現(xiàn)連續(xù)簽到呢？

我想了一晚上，因?yàn)閯傞_(kāi)始時(shí)思路跑到了“誤區(qū)”——判斷點(diǎn)擊后加1的事件是否匹配。但是你點(diǎn)擊后加1是個(gè)被動(dòng)事件，條件就是點(diǎn)擊，拿這個(gè)判斷豈不是很難受？

于是，我們同樣可以用parseInt()函數(shù)來(lái)把當(dāng)前日期（時(shí)間）和緩存日期（時(shí)間）作比較 ，判斷他們是否滿足：

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

在點(diǎn)擊事件onBindTap里：

var DT=wx.getStorageSync('D');
if(parseInt(D)!=parseInt(DT)+1){
 //非連續(xù)簽到 對(duì)應(yīng)的操作
}else{
 //連續(xù)簽到
}

易錯(cuò)點(diǎn)提示：

上面 hello.js 代碼中有這么一行：this.data.firstTime


那有沒(méi)有人想過(guò) 只寫(xiě)firstTime？

小程序中用data中的數(shù)據(jù)（變量）必須加上“this.data.”前綴！

關(guān)于“微信小程序本地存儲(chǔ)怎么實(shí)現(xiàn)每日簽到、連續(xù)簽到功能”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“微信小程序本地存儲(chǔ)怎么實(shí)現(xiàn)每日簽到、連續(xù)簽到功能”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

分享標(biāo)題：微信小程序本地存儲(chǔ)怎么實(shí)現(xiàn)每日簽到、連續(xù)簽到功能-創(chuàng)新互聯(lián)
URL網(wǎng)址：http://weahome.cn/article/cchieg.html