酷站(www.ku0.com)-致力于为互联网从业者提供动力!

热门关键词:  企业  as  baidu  c4rp3nt3r  美女
【阿里云】采购季上云仅¥223/3年

微信小程序本地存储实现每日签到、连续签到功能的教程

来源:互联网搜集 作者:秩名 人气: 发布时间:2019-10-09
本篇文章主要介绍了微信小程序本地存储实现每日签到、连续签到功能的教程,对大家的学习或者工作具有一定的参考学习价值,感兴趣的小伙伴们可以参考一下,也感谢大家对酷站(ku0.com)的支持。

昨天在看自己写的小程序项目,无意中打开了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.”前缀!

版权声明:本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 959677720#qq.cn(#换@) 举报,一经查实,本站将立刻删除。
原文链接:https://blog.csdn.net/qq_43624878/article/details/102210787

相关文章

  • 微信小程序flexbox layout快速实现基本布局的解决

    微信小程序flexbox layout快速实现基本布局的解决

    问题描述 flexbox layout 弹性盒子布局。弹性盒子可以快速的对小程序进行布局。一般传统的小程序布局方法对内容量少的页面而言很方便,但对页面比较复杂的来讲就很繁琐了。所以使用 flexbox layout 对小程序页面内容进行整体封装布局,这......
    03-24
  • 微信小程序实现搜索功能的方法

    微信小程序实现搜索功能的方法

    在页面search.wxml中,定义一个input输入框以及搜索的点击按钮,分别为它们绑定点击事件handleInputChange()和handleSearch()的事件,同时在它们的下面定义搜索的列表,代码如下所示: view class=search-header input class=search-inpu......
    03-10
  • PHP实现微信小程序在线支付功能的方法

    PHP实现微信小程序在线支付功能的方法

    小程序访问地址:payfee.php如果使用TP框架处理后台的话,写成方法即可 include WeixinPay.php;$appid=; //小程序appid$openid= $_POST[id];$mch_id=; //微信支付商户支付号$key=; //Api密钥$out_trade_no = $mch_id. time();$total_fee ......
    03-08
  • 钉钉小程序组件之自定义模态框(弹窗封装实现)

    钉钉小程序组件之自定义模态框(弹窗封装实现)

    背景 开发钉钉小程序中需要用到模态框 文档里也没有 自己搞一个 效果大概长这个样 点击指定按钮,弹出模态框,里面的内容可以自定义,可以是简单的文字提示,也可以输入框等复杂布局。操作完点击取消或确定关闭。 开始封装 上图所示文件......
    03-07
  • 详解微信小程序利用for循环解决内容变更问题

    详解微信小程序利用for循环解决内容变更问题

    问题描述 学习小程序的小伙伴可能会有这样的问题:微信小程序的页面内容要发生改变,在小程序中如何快速的来创造一个格式相同,但仅仅改变内容且易于改变的页面呢?接下来就来解决这个问题吧。 解决方案 整体思路是创建一个数组,将页面......
    03-05
  • 微信小程序开发搜索功能(前端+后端+数据库)

    微信小程序开发搜索功能(前端+后端+数据库)

    界面比较丑,主要实现逻辑... 超级简单的界面,表单,提交按钮,搜索结果展示区域... 下面是index.wxml !--index.wxml--form bindsubmit=formSubmit!--提交按钮 --input type=text name=id placeholder=输入关键词 style=border:1px soli......
    03-04
  • 微信小程序加载数据库真实数据的代码

    微信小程序加载数据库真实数据的代码

    微信小程序要加载网站数据库里面的真实数据,有一个硬性的要求,就是你的网站域名必须是https协议才行,要不然你第一步服务器域名配置你都通过不了,小编我也是前不久申请的https://www.100txy.com,具体申请步骤大家自行去申请吧,这里......
    03-04
  • 小程序接入腾讯位置服务的方法

    小程序接入腾讯位置服务的方法

    最近在写微信小程序,遇到了一些坑,在网上也查了好多,感觉都没有我想要的答案,在这里总结下,希望可以帮助大家 第一步:进入 腾讯位置服务 第二步:点击接入指引 根据上图进行登录,然后验证手机和邮箱,再前往申请秘钥(key) 以上步......
    03-03
  • 微信小程序实现音频文件播放进度

    微信小程序实现音频文件播放进度

    问题描述 在微信小程序中经常会用到控制文件播放的滑块,通过滑块可控制音频播放进度,下面即用代码实现。 解决方案 首先用.wxml与 .wmss 代码实现进度条的效果,再通过 .js 文件控制进度条的进度和进度条的时间显示。 .wxml中(播放进度......
    03-02
  • 微信小程序动态添加和删除组件的实现

    微信小程序动态添加和删除组件的实现

    一、基本思路 1、通过改变数组长度动态增删组件 ? 1 2 3 block wx:for = {{数组}} 组件 / block 2、点击添加按钮,增加数组的成员,组件相应增加 点击删除按钮,减少数组的成员,组件相应删除 二、示例 wxml: ? 1 2 3 4 5 6 7 view butto......
    02-29

最新更新