Shulou(Shulou.com)05/31 Report--

This article mainly introduces the relevant knowledge of WeChat Mini Programs local storage how to achieve daily check-in and continuous check-in function, the content is detailed and easy to understand, the operation is simple and fast, and has a certain reference value. I believe that after reading this WeChat Mini Programs local storage how to achieve daily check-in, continuous check-in function article will have a harvest, let's take a look.

Let's start with the relevant notes:

One is that only strings can be stored in storage!

I'll go. I was working on this for most of last night. I used to think that the object was stored, and I found that there was a "NAN" after I clicked it.

I don't think it's that simple.

I went back and took a closer look at the localStorage that Vue had written and found that I had made a mistake all the time. I should store the string!

After figuring this out, there is another problem: you have to "click plus 1". Here you always reverse numbers and strings, and even want to store them in the form of an array. Finally, I came up with a solution: convert the stored string into a number, add 1, and then convert the string to storage.

I can't help smiling at the thought of this, and finally I can!

But when I inadvertently hit 16 times, I cried again.

The new Date () function controls the date-- one minute / day /... You can only click once:

Var D = (new Date ()). GetDate (). ToString (); if (D! = wx.getStorageSync ('D')) {/ / determine whether the day has passed / / if it is a new day, then.} else {/ / otherwise, for example: wx.showToast ({title: 'signing in today!' , icon:'loading', duration:1200, mask:true})}

Here's another problem. I added a piece of code to onLoad at the beginning of the current page: store the current time in storage, but I found that I couldn't order it later (that day). Why?

Because of the conflict, ah, the time is stored when the page is loaded, so if you click within this event (this example: one day), such as the first and second lines of the code above, it is not true-- it is all "today", so the else statement will be executed.

Solution: remove the onLoad function so that when you start executing if, you will find that there is no storage in storage, that is, "! =".

Here is the sample code:

Hello.wxml

You have signed in {{firstTime}} times. I want to sign in.

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 ('During, 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:' check-in successful!' , icon: 'success', duration: 1200, mask: true})},})} else {wx.showToast ({title:' sign-in completed today!' , 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": "check in", "navigationBarTextStyle": "black", "navigationBarBackgroundColor": "ghostwhite"}

Expansion time:

Just achieved a simple check-in function, so, how to achieve continuous check-in?

I thought about it all night, because I got into a "misunderstanding" at the beginning-to determine whether the events that were clicked and added by 1 matched. But adding 1 after you click is a passive event, and the only condition is to click. Isn't it hard to take this judgment?

Therefore, we can also use the parseInt () function to compare the current date (time) with the cached date (time) to determine whether they are satisfied:

Var D = (new Date ()). GetDate (). ToString ()

In the click event onBindTap:

Var DT=wx.getStorageSync ('D'); if (parseInt (D)! = parseInt (DT) + 1) {/ / discontinuous check-in corresponding operation} else {/ / continuous check-in}

Tips for error prone points:

There is a line in the above hello.js code: this.data.firstTime

Has anyone ever thought of writing only firstTime?

The data (variables) in the data used in Mini Program must be added "this.data." Prefix!

This is the end of the article on "how to achieve daily check-in and continuous check-in in WeChat Mini Programs's local storage". Thank you for your reading! I believe that everyone has a certain understanding of "WeChat Mini Programs local storage how to achieve daily check-in, continuous check-in function" knowledge, if you want to learn more knowledge, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.