微信小程序本地存儲實現每日簽到、連續簽到功能

 更新時間:2019年10月09日 09:19:08   作者:云風清   我要評論
這篇文章主要介紹了微信小程序本地存儲實現每日簽到、連續簽到功能,本文給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下

昨天在看自己寫的小程序項目,無意中打開了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;
 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.”前綴!

總結

以上所述是小編給大家介紹的微信小程序本地存儲實現每日簽到、連續簽到功能,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持!
如果你覺得本文對你有幫助,歡迎轉載,煩請注明出處,謝謝!

相關文章

  • js對table的td進行相同內容合并示例詳解

    js對table的td進行相同內容合并示例詳解

    正如標題所言如何對table的td進行相同內容合并,下面為大家詳細介紹下使用js是如何做到的,感興趣的朋友不要錯過
    2013-12-12
  • javascript判斷機器是否聯網的2種方法

    javascript判斷機器是否聯網的2種方法

    只有機器已經聯網以后,web應用才能啟動,下面使用javascript判斷機器是否聯網,具體判斷代碼如下,有此需求的朋友可以參考下
    2013-08-08
  • JS ES6中setTimeout函數的執行上下文示例

    JS ES6中setTimeout函數的執行上下文示例

    這篇文章主要給大家介紹了關于JS ES6中setTimeout函數的執行上下文的相關資料,文中給出了詳細的介紹和示例代碼供大家參考學習,需要的朋友們下面來一起看看吧。
    2017-04-04
  • JavaScript庫 開發規則

    JavaScript庫 開發規則

    1. 保持無侵入性,標記不想知道你的JavaScript代碼;2. 嚴禁修改和擴展Object.prototype!;3. 對JavaScript內建對象的擴展越少越好;4. 跟隨標準;5. 或著跟隨主導 ;6. 保持靈活;7. 管理內存;8. 淘汰瀏覽器嗅探;9. 小巧更佳……
    2009-01-01
  • JS簡單計算器實例

    JS簡單計算器實例

    這篇文章主要介紹了JS簡單計算器的實現方法,以加法實例分析了js實現計算功能的技巧,需要的朋友可以參考下
    2015-01-01
  • Javascript:為input設置readOnly屬性(示例講解)

    Javascript:為input設置readOnly屬性(示例講解)

    本篇文章主要是對Javascript中為input設置readOnly屬性的示例代碼進行了介紹。需要的朋友可以過來參考下,希望對大家有所幫助
    2013-12-12
  • boostrap模態框二次彈出清空原有內容的方法

    boostrap模態框二次彈出清空原有內容的方法

    今天小編就為大家分享一篇boostrap模態框二次彈出清空原有內容的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-08-08
  • JS跨域總結

    JS跨域總結

    JS跨域總結,主要是解決js中跨域訪問的我問題
    2012-08-08
  • javascript Slip.js實現整屏滑動的手機網頁

    javascript Slip.js實現整屏滑動的手機網頁

    Slip.js能做什么?Slip.js可以讓你的手機網站像原生手機軟件一樣慣性滾動,手觸圖片輪換等等,對Slip.js感興趣的小伙伴們可以參考一下
    2015-11-11
  • 解決option標簽selected=

    解決option標簽selected="selected"屬性失效的問題

    下面小編就為大家帶來一篇解決option標簽selected="selected"屬性失效的問題。小編覺得挺不錯的,現在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧,希望對大家有所幫助
    2017-11-11

最新評論

码报108