欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序本地存儲實現(xiàn)每日簽到、連續(xù)簽到功能

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

昨天在看自己寫的小程序項目，無意中打開了CSDN APP，突然間覺得，我去，如果在小程序中加個“簽到”功能，豈不美哉?。ê冒?，其實是買的書昨天沒到貨，然后閑著無事，就想起了大明湖畔的“簽到”）

但是吧，又不想寫和服務(wù)器交互的，本著“簡單點”的原則，我想起了曾經(jīng)的摯愛—— 本地存儲 。

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

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

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

覺得 事情并沒有這么簡單。

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

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

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

但是當(dāng)我無意中狂點16下的時候，我又哭了…

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

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)，這樣以后就點不了了（當(dāng)天），為什么？

因為沖突了啊，加載頁面時存放此時時間，那么你如果在這個事件內(nèi)（本例：一天）去點擊，如上面代碼第一、二行，它不成立——都是“今天”，所以會執(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"
}

擴展時刻：

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

我想了一晚上，因為剛開始時思路跑到了“誤區(qū)”——判斷點擊后加1的事件是否匹配。但是你點擊后加1是個被動事件，唯一條件就是點擊，拿這個判斷豈不是很難受？

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

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

在點擊事件onBindTap里：

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

易錯點提示：

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

那有沒有人想過 只寫firstTime？

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

總結(jié)

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

相關(guān)文章

  • 淺談JS中var,let和const的區(qū)別

    淺談JS中var,let和const的區(qū)別

    這篇文章主要介紹了淺談JS中var,let和const的區(qū)別,let和const是ES6新增的關(guān)鍵字,詳細的內(nèi)容介紹，具有一定的參考價值，需要的朋友可以參考一下
    2022-07-07
  • JavaScript防抖與節(jié)流詳解

    JavaScript防抖與節(jié)流詳解

    這篇文章主要介紹了JS中的防抖與節(jié)流及作用詳解，本文通過文字說明加示例代碼的形式給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下
    2021-10-10
  • javascript編寫簡易計算器

    javascript編寫簡易計算器

    這篇文章主要為大家詳細介紹了javascript編寫簡易計算器的相關(guān)代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2017-05-05
  • JavaScript自動設(shè)置IFrame高度的小例子

    JavaScript自動設(shè)置IFrame高度的小例子

    JavaScript自動設(shè)置IFrame高度的小例子，需要的朋友可以參考一下
    2013-06-06
  • typescript路徑別名問題詳解與前世今生的故事

    typescript路徑別名問題詳解與前世今生的故事

    我們都知道只有正確引用路徑,Typescript才不會提示報錯,這篇文章主要給大家介紹了關(guān)于typescript路徑別名問題詳解與前世今生的故事,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下
    2022-07-07
  • JS控制下拉列表左右選擇實例代碼

    JS控制下拉列表左右選擇實例代碼

    在本篇內(nèi)容中小編給各位分享的是關(guān)于如何使用JS控制下拉列表左右選擇的實例代碼，需要的朋友們可以參考下。
    2020-05-05
  • setInterval計時器不準的問題解決方法

    setInterval計時器不準的問題解決方法

    在js中如果打算使用setInterval進行倒數(shù),計時等功能，往往是不準確的，針對這個問題，本文有個不錯的解決方案
    2014-05-05
  • 慎用 somefunction.prototype 分析

    慎用 somefunction.prototype 分析

    在寫 JavaScript 腳本的時候，為了創(chuàng)建一個類，如果不使用框架，一般情況我們都會使用 prototype 來給要創(chuàng)建的類增加公有方法
    2009-06-06
  • sso跨域?qū)慶ookie的一段js腳本(推薦)

    sso跨域?qū)慶ookie的一段js腳本(推薦)

    下面小編就為大家?guī)硪黄猻so跨域?qū)慶ookie的一段js腳本(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-05-05
  • 小程序click-scroll組件設(shè)計

    小程序click-scroll組件設(shè)計

    這篇文章主要介紹了小程序click-scroll組件設(shè)計，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2019-06-06

最新評論