小程序倒计时防刷新功能
这是一个不美好的事情,我使用的是vant的倒计时,不管什么倒计时,刷新后倒计时就会重新开始。从晚上查到下班,从回家查到11点,结果没找到,没办法了自己写,结果10min写出来了,事实证明,我们需要相信自己。
签到加积分功能,小程序正在开发中,以后欢迎大家支持
效果图如下,发文不发图都是耍流氓
下面是完整代码
.wxml
<view class="outBox"> <!-- 签到 --> <view class="qiandao"> <view class="header"> <text class="jfLabel">我 的 积 分</text> <view class="myjf">{{integral}}</view> </view> <view class="mainBody"> <view class="top">签到领积分,3小时领一次</view> <view class="ljqd {{switchBtn == false ? 'noClick' : ''}}" bindtap="hClickSignin"> <view class="qd" wx:if="{{switchBtn}}">签到</view> <view wx:else> <van-count-down bind:finish="finished" time="{{ time }}" /> </view> </view> </view> </view> </view>
.js
let canRoll = true, // 加控制,防止用户点击两次 num = 1, // 用在动画上,让用户在第二次点击的时候可以接着上次转动的角度继续转 lotteryArrLen = 0, // 放奖品的数组的长度 lottery = ['1积分', '5积分','15积分','25积分','100积分']; // 放奖品 Page({ data: { jifen: 0, // 我的积分 id: '', // 该用户积分id }, onLoad(opt) { this.setPlateData(); // 执行设置转盘表面的文字 let aniData = wx.createAnimation({ // 创建动画对象 duration: 2000, timingFunction: 'ease' }); this.aniData = aniData; // 将动画对象赋值给this的aniData属性 this.getMyFen() }, onShow(){ this.getMyFen() }, // 设置奖品数组 setPlateData() { lotteryArrLen = lottery.length; // 获取奖品数组的长度,用来判断 if (lotteryArrLen < 2) { // 数组的奖品只有一个,扩展数组的长度到4 let evenArr = new Array(4); // 创建一个数组,方便操作。 for (let i = 0; i < 4; i++) { if (i % 2 == 1) { // 这里为什么要取1是为了在默认的界面将指针放在谢谢的地方,防止别人拿着中奖的截图来要奖品 evenArr[i] = lottery[0]; // 将原数组的内容赋值到新的数组 } else { evenArr[i] = '谢谢' // 在数组中间隔插入谢谢 } } lottery = [...evenArr]; // 将整合好的数组赋值给lottery数组 } else { // 数组中的奖品超过1个,则正常扩展数组,扩展的数组为原来的2倍 let dataLen = 0; // 用来放原来数组的索引 let evenArr = new Array(lotteryArrLen * 2); // 创建扩展数组 for (let i = 0; i < (lotteryArrLen * 2); i++) { if (i % 2 == 1) { evenArr[i] = lottery[dataLen]; // 将原来数组的值赋值给新数组 dataLen++; // 原来数组的索引加一 } else { evenArr[i] = '谢谢' } } lottery = [...evenArr]; // 将整合好的数组赋值给lottery数组 } lotteryArrLen = lottery.length; // 获取新的数组长度 this.setData({ lottery: lottery // 设置好值,用于页面展示 }) }, // 点击Go开始抽奖 startRollTap() { console.log(this.data.jifen); if (this.data.jifen < 5) { wx.showToast({ title: '积分不足', icon: 'none' }) return false } if (canRoll) { canRoll = false; let aniData = this.aniData; // 获取this对象上的动画对象 let rightNum = ~~(Math.random() * lotteryArrLen); // 生成随机数 console.log(`随机数是${rightNum}`); console.log(`奖品是:${lottery[rightNum]}`); aniData.rotate(3600 * num - 360 / lotteryArrLen * rightNum).step(); this.setData({ aniData: aniData.export() }) num++; canRoll = true; // 中奖提示 if(lottery[rightNum] == '谢谢'){ // 点击一次减5积分 var newJiFen = this.data.jifen - 5 console.log(newJiFen); this.changeJiFen(newJiFen) } else { setTimeout(function () { //中奖 wx.showModal({ title: '提示', content: '恭喜您获得'+ lottery[rightNum], showCancel: false, success: function (res) { if (res.confirm) { //设置按钮可以点击 // e.setData({ // btnconfirm: '/images/dianjichoujiang.png', // clickLuck: 'clickLuck', // }) // e.loadAnimation(); } } }) }, 3000); // 点击一次减5积分 var newJiFen = this.data.jifen - 5 console.log('减5后为:'); console.log(newJiFen); // 中奖加积分 console.log('中了'); console.log(lottery[rightNum]); var str = lottery[rightNum] // 抽到的积分 str = parseInt(str.substring(0,str.length - 2)) // 去掉'积分'获得抽到的积分数值 var newFen = newJiFen + str // 原来积分加上抽到的积分 console.log('最新'); console.log(newFen); this.changeJiFen(newFen) // 将新积分保存到云数据库 } } this.getMyFen() }, // 从云数据库拿我的积分 getMyFen(){ wx.cloud.database().collection('jifen') .get() .then(res => { if(res.data.length === 0) { this.addJiFen() // 添加0积分 } else { // console.log(res); this.setData({ jifen: res.data[0].jifen, id: res.data[0]._id }) } }).catch(err => { console.log(err); }) }, changeJiFen(curFen){ // 抽奖更新积分 console.log(curFen); console.log(this.data.id); wx.cloud.database().collection('jifen') .doc(this.data.id) .update({ data: { jifen: curFen } }).then(res => { console.log('更新成功',res); this.getMyFen() // 重新获取数据 }).catch(err => { console.log('更新失败',err); }) }, onHide(){ lottery = ['1积分', '5积分','15积分','25积分','100积分']; // 修复退出进入页面,转盘文案增加bug }, onUnload(){ lottery = ['1积分', '5积分','15积分','25积分','100积分']; // 修复退出进入页面,转盘文案增加bug } })
.wxss
.noClick { pointer-events: none; /* 禁止鼠标点击 */ } 这个样式是修复这个bug的: 签到后切换为倒计时,点击倒计时那个圆形按钮,还是会触发事件,加积分。倒计时的时候添加这个样式,就会禁止点击事件。
样式有点儿垃圾,就不放了。说一下逻辑,点击签到,3小时后可以再次签到。点击签到,获取当前时间毫秒数,当前时间毫秒数加上自己设置的时间就是结束时间,给结束时间做缓存。然后自己封装一个函数noRefresh,不管什么时候刷新,从缓存拿到结束时间,用结束时间减去当前毫秒数,算出的时间间隔与自己设置的时间比较,如果小(注意不为负数)就说明还没到签到的时间,这个时候我们就把这个时间间隔赋值给data里的time,让倒计时接着跑。这里有个bug,就是在点击签到的时候,我又调用了一次onLoad,如果不调用的话,第一次倒计时时间正确,但是接下来的次数时间就变成原来一半了,原因是什么,我也懒得找了。大家有更好的方法可以dd我,我也是第一次写小程序。然后,没了,就是这样。