微信小程序之验证码短信倒计时

最近做的一个项目里有一个收验证码的倒计时需求，mark出来~希望对小伙伴们有帮助

wxml

<view class="checkPhone-box"><view class="checkPhone"><view class="checkPhoneTip">验证码已发送至您的手机,请注意查收！</view><view class="checkPhone-item"><text class="item-label">请输入验证码</text><input type="number" maxlength='6' class="item-input"/><button class="item-btn" disabled="{{isDisabled}}" bindtap="sendCode">{{sendBtn}}</button></view></view><view class="next-step"><view class="next-btn" bindtap="next">下一步</view></view>
</view>
复制代码

js:

Page({/*** 页面的初始数据*/data: {checkOk:false,setInter:'', // 计时器sendBtn:'(已发送)60s', // 按钮文字isDisabled:true // 按钮是否禁用},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {wx.setNavigationBarTitle({title: "绑定银行卡"});this.startTimer();},// 计时器startTimer:function(){var self = this;var count = 60;this.data.setInter = setInterval(function () {count--;var sendBtnstr = "(已发送)" + count+"s";self.setData({sendBtn: sendBtnstr,isDisabled: true})if (count == 0) {sendBtnstr = "重新发送";self.setData({sendBtn: sendBtnstr,isDisabled: false});self.endSetInter();}}, 1000);},endSetInter: function () {var self = this;// 清除计时器  即清除setInterclearInterval(self.data.setInter)},sendCode:function(){if (!this.data.isDisabled){this.startTimer();}else{console.log(this.data.isDisabled);}}})
复制代码

微信小程序之验证码短信倒计时相关推荐

【微信小程序 - 工作实战分享】1.微信小程序发送手机短信验证码（阿里云）
发送手机短信验证码前言一. 准备工作二. 配置三. 实战代码(仅仅是后台代码,前端传入手机号) 总结前言在网站和移动应用中利用短信验证码进行信息确认是最常用的验证手段.随着短信验证码的技术 ...
微信小程序键盘显示短信验证码
1.场景描述: IOS系统一些APP或者微信小程序在收到短信验证码的时候会在键盘上自动保存验证码信息,当用户点击的时候,会自动赋值到当前所点击的输入框中 2.案例: 2.实现: TIPS:这个功能是 ...
微信小程序如何发送短信验证码，无需搭建服务器
自从微信小程序提供云开发支持,开发者无需搭建后台服务器,使用微信提供的核心API就可以实现应用功能,此时就需要小程序能够自己发送短信,比如短信验证码,榛子云短信(http://smsow.zhenzi ...
微信小程序开发－短信注册功能
关注公众号"码农帮派",查看更多系列技术文章: 微信小程序开发,实现手机号注册的功能模块,去除了网络请求,网络请求的地方可以使用wx提供的网络请求的API完成. ［效果展示］［目 ...
微信小程序实现手机短信验证码功能
我选择的短信平台是榛子云短信,具体可看文档http://smsow.zhenzikj.com/doc/sdk.html 准备工作下载zhenzisms.js文件并导入到所使用的js文件中有个自己的 ...
微信小程序发送验证码60秒倒计时
wxml <view class="li-send" bindtap="onSend" wx:if="{{send}}">发送验 ...
小程序实现手机短信验证功能
小程序实现手机短信验证功能废话不多说,直接把项目写的手机短信验证功能发出来 .wxml <form bindsubmit="phone"> <input typ ...
微信小程序-动态验证码
微信小程序-动态验证码一.创建自定义组件verification-code 二.在index页面使用一.创建自定义组件verification-code verification-code.js ...
微信小程序，验证码输入框
微信小程序,验证码输入效果预览写了个小程序验证码输入的小demo,用的方法是比较猥琐的隐藏input框,输入内容绑定的方法 wxml代码 <view class="wx-page- ...

微信小程序之验证码短信倒计时

微信小程序之验证码短信倒计时相关推荐

最新文章

热门文章