Yesterday, I was reading the mini program project I wrote and accidentally opened the CSDN APP. Suddenly, I thought, if I go, wouldn’t it be nice if I add the “check-in” function to the mini program? (Okay, actually, the book I bought didn't arrive yesterday, and I was idle and remembered the "sign-in" on the banks of Daming Lake)
But, I don’t want to write and interact with the server. Based on the principle of “simple”, I remembered my former love - local storage.
Let’s talk about the relevant attention first:
One is that only strings can be stored in storage!
I went and spent most of my time last night doing this. I used to think that what I stored was the object, but after writing it with great enthusiasm, I found that "NAN" appeared after clicking...
I think things are not that simple.
I went back carefully and looked at the localStorage that Vue had written, and found that I had been making mistakes and should store strings!
After figuring this out, there is another problem: you want to "click to add 1", and you always reverse the numbers and strings here, and even think about storing them in an array form. . . Finally, I thought of a solution: convert the stored string into a number, add 1 and then convert it into a string and store it in storage.
Thinking of this, I couldn't help but feel happy, it's finally OK!
But when I accidentally clicked 16 times, I cried again...
The new Date() function controls the date - one minute/day/...it can only be clicked once:
var D=(new Date()).getDate().toString();
if(D != ('D')){ //Judge whether the day has passed //If it's a new day, then... }else{
// Otherwise, for example: ({
title: 'The check-in today has been completed! ',
icon:'loading',
duration:1200,
mask:true
})
}
Another problem here is that I added a code in onLoad at the beginning of the current page: Save the current time in the storage, but I found that it will not be clicked in the future (that day). Why?
Because of a conflict, the time is stored when loading the page, then if you click in this event (this example: one day), like the first and second lines of the above code, it does not hold - they are all "today", so the else statement will be executed.
Solution: Remove the onLoad function, so when you start executing if, you will find that there is no storage in the storage, which is "!=".
Here is the sample code:
<view class="container">
<view class="mxc1">
<text>You've signed in {{firstTime}} Second-rate</text>
</view>
<view class="{{flag?'mxc2-1':'mxc2-2'}}" bindtap="onBindTap">
<text>I want to sign in</text>
</view>
</view>
.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;
}
Page({
data:{
firstTime:'0',
flag:true
},
onBindTap:function(){
var D=(new Date()).getDate().toString();
if(D != ('D')){
('D', D);
({
key: 'FirstTime',
data: (parseInt() + 1).toString(),
})
var that = this;
var firstTime = ({
key: 'FirstTime',
success: function (res) {
({
firstTime: ,
flag:false
})
({
title: 'Successfully checked in! ',
icon: 'success',
duration: 1200,
mask: true
})
},
})
}else{
({
title: 'The check-in today has been completed! ',
icon:'loading',
duration:1200,
mask:true
})
}
},
onShow:function(options){
var that = this;
var firstTime = ({
key: 'FirstTime',
success: function (res) {
({
firstTime:
})
},
})
var D = (new Date()).getDate().toString();
if (D != ('D')){
({
flag:true
})
}else{
({
flag:false
})
}
},
})
{
"navigationBarTitleText": "Sign in",
"navigationBarTextStyle": "black",
"navigationBarBackgroundColor": "ghostwhite"
}
Expansion Moment:
A simple check-in function has just been implemented, so how to achieve continuous check-in?
I thought about it all night because at the beginning I thought it reached a "misunderstanding" - to determine whether the event that adds 1 after clicking matches. But adding 1 after clicking is a passive event. The only condition is to click. Wouldn't it be uncomfortable to make this judgment?
Therefore, we can also use the parseInt() function to compare the current date (time) and cached date (time) to determine whether they meet the requirements:
var D=(new Date()).getDate().toString();
In the click event onBindTap:
var DT=('D');
if(parseInt(D)!=parseInt(DT)+1){
//Discontinuous check-in corresponding operation}else{
//Continuous sign-in}
Prone to errors:
There is a line in the above code:
Has anyone ever thought about writing only firstTime?
The data (variable) used in the applet must be prefixed with the "."
Summarize
The above is the local storage of WeChat applets introduced to you. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support for my website!
If you think this article is helpful to you, please reprint it. Please indicate the source, thank you!