微信小程序 - 倒计时60秒(获取验证码)

因为写这个功能的时候我也是个新手，所以并没有抽取class和js~ 或许也正是因此，新手看起来会更简单一些 ~

Make a little progress every day ~

实现效果
功能版
项目完整版

实现效果

为了观看效果先行设置为10s，正常一般都是60s

功能版

wxml

这里我没有采用view、text等标签，而是采用了button，主要原因是用到了disabled的属性，作用于发送验证码后事件失效，倒计时完毕之后事件继续生效；

所遇问题：因为前期使用view、text标签没有找到类型disabled的属性，所以在发送验证码后依旧可以进行点击，从而导致开启多个计时器，计时速度加快、计时器覆盖

//点击属性：sendCode  点击状态：smsFlag  字体颜色：sendColor  显示文字：sendTime
<button bindtap="sendCode" disabled="{{smsFlag}}" style='margin-top:50px;
margin-right:10rpx;color:{{sendColor}};font-size:28rpx'>{{sendTime}}</button>

注意： wxml中声明的smsFlag 代表 disabled的状态；disabled： true代表不可点击；false代表可点击(这点对于我而言有点别扭 - - ！)

Page({data: {//设置初始的状态、包含字体、颜色、还有等待事件 > <sendTime: '获取验证码',sendColor: '#363636',snsMsgWait: 60},// 获取验证码sendCode: function() {  // 60秒后重新获取验证码var inter = setInterval(function() {this.setData({smsFlag: true,sendColor: '#cccccc',sendTime: this.data.snsMsgWait + 's后重发',snsMsgWait: this.data.snsMsgWait - 1});if (this.data.snsMsgWait < 0) {clearInterval(inter)this.setData({sendColor: '#363636',sendTime: '获取验证码',snsMsgWait: 60,smsFlag: false});}}.bind(this), 1000);},})

项目完整版

forget.js

var md5Utils = require('../../utils/utilMd5.js');
var ptserviceUrl = getApp().globalData.ptserviceUrl;
Page({/*** 页面的初始数据*/data: {tel: "",code: "",newPassword: "",sendTime: '发送验证码',sendColor: '#363636',snsMsgWait: 60},/*** 生命周期函数--监听页面加载*/onLoad: function(options) {},inputTel: function(e) {this.setData({tel: e.detail.value})},inputCode: function(e) {this.setData({code: e.detail.value})},inputNewpassword: function(e) {this.setData({newPassword: e.detail.value})},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function() {},/*** 生命周期函数--监听页面显示*/onShow: function() {},// 获取验证码sendCode: function() {var that = this;if (this.data.tel == "") {this.toast('请输入手机号');return;}if (!(/^1[3|4|5|8][0-9]\d{8}$/.test(this.data.tel))) {this.toast('手机号输入错误');return;}// 60秒后重新获取验证码var inter = setInterval(function() {this.setData({smsFlag: true,sendColor: '#cccccc',sendTime: this.data.snsMsgWait + 's后重发',snsMsgWait: this.data.snsMsgWait - 1});if (this.data.snsMsgWait < 0) {clearInterval(inter)this.setData({sendColor: '#363636',sendTime: '发送验证码',snsMsgWait: 60,smsFlag: false});}}.bind(this), 1000);// 写自己的服务器和接口- - wx.request({url: ptserviceUrl + 'sendCode',data: {mobiles: this.data.tel,},method: "POST",header: {'content-type': "application/x-www-form-urlencoded"},success(res) {console.log(res);if (res.data.success) {that.toast('短信验证码发送成功，请注意查收');}}})},// 提交信息saveClick: function() {var that = this;if (that.data.tel == "") {that.toast("手机号不可为空");return;}if (that.data.code == "") {that.toast("验证码不可为空");return;}if (that.data.newPassword == "") {that.toast("新密码不可为空");return;}var md5psd = md5Utils.hexMD5(that.data.newPassword);// 写自己的服务器和接口- - wx.request({url: ptserviceUrl + 'forget',data: {mobile: this.data.tel,phcode: this.data.code,npwd: md5psd,},method: "POST",header: {'content-type': "application/x-www-form-urlencoded"},success(res) {console.log(res);if (res.data.success) {wx.navigateBack({delta: 1,})} else {that.toast(res.data.msg);}}})},// toast方法抽取toast: function(msg) {wx.showToast({title: msg,icon: 'none',duration: 2000,mask: true})},/*** 生命周期函数--监听页面隐藏*/onHide: function() {},/*** 生命周期函数--监听页面卸载*/onUnload: function() {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function() {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function() {},/*** 用户点击右上角分享*/onShareAppMessage: function() {}
})

forget.wxml (为了方便查看，并没有抽取class，可直接copy使用 > , <)

<view class='container'><view style='width:100%;height:100%;flex-direction:column'><view style='margin-left:38rpx;margin-top:15px;margin-right:38rpx'><view style=';display:flex;align-items:center; justify-content:space-between;'><input bindinput="inputTel" maxlength="11" name="account" placeholder="请输入手机号" style='margin-top:50px;font-size:34rpx'></input><button bindtap="sendCode" disabled="{{smsFlag}}" style='margin-top:50px;margin-right:10rpx;color:{{sendColor}};font-size:28rpx'>{{sendTime}}</button></view><view style='background-color:#eee;width:100%;height:1px;margin-top:10px'></view></view><view style='margin-left:38rpx;margin-top:20px;margin-right:38rpx'><view style='display:flex;align-items:center; justify-content:space-between;'><input bindinput="inputCode" name="account" maxlength="8" placeholder="请输入验证码" style='font-size:34rpx'></input></view><view style='background-color:#eee;width:100%;height:1px;margin-top:10px'></view></view><view style='margin-left:38rpx;margin-top:20px;margin-right:38rpx'><view style='display:flex;align-items:center; justify-content:space-between;'><input bindinput="inputNewpassword" name="account" type='password' placeholder="请输入新密码" style='font-size:34rpx'></input></view><view style='background-color:#eee;width:100%;height:1px;margin-top:10px'></view></view><view style='margin-right:38rpx;margin-left:38rpx;margin-top:30px;background:#fff;display:flex;height:45px;align-items:center;justify-content:center' bindtap='saveClick'><text style='font-size:15px'>确定</text></view></view>
</view>

微信小程序 - 倒计时60秒(获取验证码)相关推荐

微信小程序倒计时实现
微信小程序倒计时实现 a.wxml <view class="daojishi"><text>{{day}}</text>天<text&g ...
php验证码zhuc_微信小程序实例：实现随机验证码（附代码）
本篇文章给大家带来的内容是关于微信小程序实例:实现随机验证码(附代码) ,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 小程序上经常会有一些注册申请页面需要用到随机验证码.具体实现 ...
【微信小程序 - 工作实战分享】1.微信小程序发送手机短信验证码（阿里云）
发送手机短信验证码前言一. 准备工作二. 配置三. 实战代码(仅仅是后台代码,前端传入手机号) 总结前言在网站和移动应用中利用短信验证码进行信息确认是最常用的验证手段.随着短信验证码的技术 ...
微信小程序首页index.js获取不到app.js中动态设置的globalData的原因以及解决方法
微信小程序首页index.js获取不到app.js中动态设置的globalData的原因以及解决方法参考文章: (1)微信小程序首页index.js获取不到app.js中动态设置的globalDat ...
uniapp微信小程序授权登录和获取微信绑定的手机号码
uniapp微信小程序授权登录和获取微信绑定的手机号码弹出授权的弹框 <view class="weixinOk" @tap="getUserProfile&qu ...
微信小程序创建节点选择器获取宽高wx.createSelectorQuery
微信小程序提供了一个获取节点宽高等信息的方法,一共是两步. 1.在对应的节点上定义一个id <image src='{{imgUrl}}' class="look-image" ...
uni-app 微信小程序用高德sdk获取地理位置，以及天气信息
uni-app 微信小程序采用高德sdk获取地理位置和天气信息主要有以下几个步骤: 1. 注册高德开发者,并获取应用key 概述-微信小程序插件 | 高德地图API 在这个网页最下面,按步骤来就可以了 ...
微信小程序使用百度api获取天气信息 —— 微信小程序教程系列（16）
之前已经介绍过,如何使用百度地图api来获取地理位置信息微信小程序的百度地图获取地理位置 -- 微信小程序教程系列(15) 下面介绍使用百度api来获取天气信息. 1> 第一步:先到百度开放平 ...
【微信小程序/实现】实现获取微信个人信息
[微信小程序/实现]实现获取微信个人信息一.目的:实现获取微信个人的昵称和头像二.页面过程三.实现过程 (1)核心代码: (2)完整代码 1. wxml代码 2. wxss代码 3. js代码 ...

微信小程序 - 倒计时60秒(获取验证码)

Make a little progress every day ~

实现效果

功能版

项目完整版

微信小程序 - 倒计时60秒(获取验证码)相关推荐

最新文章

热门文章