微信小程序实现发送验证码按钮效果


Posted in Javascript onDecember 20, 2018

本文实例为大家分享了微信小程序发送验证码按钮效果展示的具体代码,供大家参考,具体内容如下

首先上图,最终效果如下:

微信小程序实现发送验证码按钮效果

实现关键点

  • 获取验证码按钮无边框: 可以用 button::after{ border: none; } 来去除边框,或者直接用view绑定点击事件。本例子中没有使用button
  • 点击发送后,60秒内按钮处于disable状态
  • 点击发送后,text分为剩余秒数后缀两部分
  • .form_group 使用 flex 布局

代码

.wxml

<view class="form_group">
  <input type="text" placeholder="手机号码" placeholder-class="placeholder_style" data-name="data_phone" value="{{data_phone}}" bindinput='getInputKey' />
 </view>
 <view class="form_group">
  <input type="text" class="sendmsg_input" placeholder="短信验证码" data-name="data_code" value="{{data_code}}" placeholder-class="placeholder_style" bindinput='getInputKey' />
  <view class='vertificate' bindtap="getVerificationCode">{{time}}
  <text>{{suffix}}</text>
  </view>
 </view>

.wxss

.form_group {
 display: flex;
 flex-direction: row;
 justify-content: space-between;
}

.form_group input, .form_group picker {
 width: 676rpx;
 border-bottom: 1px solid #ddd;
 height: 121rpx;
 padding-left: 20rpx;
 font-family: PingFangSC-Regular;
 font-size: 32rpx;
 letter-spacing: 0;
 line-height: 121rpx;
}

.form_group .sendmsg_input {
 width: 370rpx;
}

.form_group .vertificate {
 width: 326rpx;
 border-bottom: 1px solid #ddd;
 height: 121rpx;
 padding-left: 20rpx;
 font-family: PingFangSC-Regular;
 font-size: 32rpx;
 letter-spacing: 0;
 line-height: 121rpx;
 text-align: center;
 color: #34c9c3;
}

.vertificate text {
 color: gray;
}

.placeholder_style {
 font-family: PingFangSC-Regular;
 font-size: 32rpx;
 color: #dbdbdb;
 letter-spacing: 0;
}

.js

import SignupService from '../service/sign-up.service.js';
import HTTP from '../../../utils/http.js';
import Util from '../../../utils/util.js';

let _signupService = new SignupService();
let _http = new HTTP();
let _util = new Util();

Page({
 data: {
 time: "获取验证码",
 currentTime: 61,
 disabled:false,
 suffix:'',
 data_phone:'',
 data_code:'',
 },
 
 ...
 
 // 获取输入框的值
 getInputKey(e) {
 let key = e.currentTarget.dataset.name;
 let value = e.detail.value;
 this.setData({
  [key]: value
 })
 },

 // 获取验证码
 getVerificationCode() {
 let _this = this;
 if (!_this.data.disabled) {
  _this.getCode();
 }
 },

 getCode() {
 let _this = this;
 let phone = _this.data.data_phone;
 if (_util.isPhoneAvailable(phone)) {
  _signupService.getCode(phone).then(res=>{  // 调用后端API,获取手机验证码
  _util.showToast('success',"已发送");
  _this.setData({
   disabled: true
  })
  },err=>{
  _util.showToast('none',"发送失败")
  });
  
  // 设置发送验证码按钮样式
  let interval = null;
  let currentTime = _this.data.currentTime;

  interval = setInterval(function() {
  currentTime--;
  _this.setData({
   time: currentTime,
   suffix: '秒后可重新获取'
  })
  if (currentTime <= 0) {
   clearInterval(interval)
   _this.setData({
   time: '重新发送',
   suffix: '',
   currentTime: 61,
   disabled: false
   })
  }
  }, 1000)
 } else {
  _util.showToast('none','请输入正确的手机号码。');  
 }
 },

sign-up.service.js

//获取手机验证码
 getCode(phone){
 return _http.request({
  type: 'post',
  url: '/account/validate-codes',
  data: {
  phone:phone
  }
 })
 }

http.js: 封装wx.request 为Promise

class HTTP {
 request(param){
 let _this = this;
 let baseUrl = '.......';
 return new Promise((resolve, reject) => {
  let access_token = wx.getStorageSync('access_token');
  wx.request({
  method: param.type || 'get',
  url: baseUrl+ param.url || '',
  data: param.data || null,
  header: access_token ? {
   'content-type': 'application/x-www-form-urlencoded',
   "Authorization": `Bearer ${access_token}`
  } : {
   'content-type': 'application/x-www-form-urlencoded',
  },
  success: (res => {
   if (res.statusCode === 200 || res.statusCode === 201) {
   //200: 服务端业务处理正常结束
   resolve(res.data)
   } else {
   //其它错误,提示用户错误信息
    
   /*** 
    * 需要根据接口文档改!!!
   */
   reject(res)
   }
  }),
  fail: (err => {
   if(err.responseJSON){
   reject(err.responseJSON.message)
   }else{
   reject(err);
   }
  })
  });
 });
 }
}

export default HTTP;

util.js

// 验证手机号码是否有效
 isPhoneAvailable(phone) {
 var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
 if (!myreg.test(phone)) {
  return false;
 } else {
  return true;
 }
 }
 
//小程序弹框提示
 showToast(icon,msg,duration=2000){
 wx.showToast({
  title: msg,
  duration: duration,
  icon: icon
 })
 }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用正则表达式 动态创建/增加css style script 兼容IE firefox
Mar 10 Javascript
模拟用户点击弹出新页面不会被浏览器拦截
Apr 08 Javascript
jQuery Ajax 上传文件处理方式介绍(推荐)
Jun 30 Javascript
深入浅析Vue组件开发
Nov 25 Javascript
利用原生JS与jQuery实现数字线性变化的动画
Feb 24 Javascript
Bootstrap导航中表单简单实现代码
Mar 06 Javascript
JavaScript结合HTML DOM实现联动菜单
Apr 05 Javascript
老生常谈javascript中逻辑运算符&amp;&amp;和||的返回值问题
Apr 13 Javascript
详解react-router如何实现按需加载
Jun 15 Javascript
Vue精简版风格指南(推荐)
Jan 30 Javascript
微信小程序如何像vue一样在动态绑定类名
Apr 17 Javascript
动态实现element ui的el-table某列数据不同样式的示例
Jan 22 Javascript
使用puppeteer爬取网站并抓出404无效链接
Dec 20 #Javascript
详解如何使用node.js的开发框架express创建一个web应用
Dec 20 #Javascript
js canvas实现橡皮擦效果
Dec 20 #Javascript
浅谈VueJS SSR 后端绘制内存泄漏的相关解决经验
Dec 20 #Javascript
Cocos2d实现刮刮卡效果
Dec 20 #Javascript
浅谈Fetch 数据交互方式
Dec 20 #Javascript
cocos2dx+lua实现橡皮擦功能
Dec 20 #Javascript
You might like
我的论坛源代码(三)
2006/10/09 PHP
第十一节--重载
2006/11/16 PHP
mysql5写入和读出乱码解决
2006/11/25 PHP
修改destoon会员公司的伪静态中的com目录的方法
2014/08/21 PHP
JQuery文本框高亮显示插件代码
2011/04/02 Javascript
javascript:json数据的页面绑定示例代码
2014/01/26 Javascript
IE下双击checkbox反应延迟问题的解决方法
2014/03/27 Javascript
jQuery使用之标记元素属性用法实例
2015/01/19 Javascript
js运动事件函数详解
2016/10/21 Javascript
原生JS简单实现ajax的方法示例
2016/11/29 Javascript
图片懒加载插件实例分享(含解析)
2017/01/09 Javascript
JavaScript中EventBus实现对象之间通信
2020/10/18 Javascript
[51:05]DOTA2上海特级锦标赛主赛事日 - 5 败者组决赛Liquid VS EG第一局
2016/03/06 DOTA
[01:11]steam端dota2实名认证操作流程视频
2021/03/11 DOTA
用Python中的__slots__缓存资源以节省内存开销的方法
2015/04/02 Python
python复制列表时[:]和[::]之间有什么区别
2018/10/16 Python
Python简易版停车管理系统
2019/08/12 Python
python实现广度优先搜索过程解析
2019/10/19 Python
使用 Python 清理收藏夹里已失效的网站
2019/12/03 Python
Python使用pyyaml模块处理yaml数据
2020/04/14 Python
python实现程序重启和系统重启方式
2020/04/16 Python
Python run()函数和start()函数的比较和差别介绍
2020/05/03 Python
浅谈keras中的Merge层(实现层的相加、相减、相乘实例)
2020/05/23 Python
用Python开发app后端有优势吗
2020/06/29 Python
python实现从ftp上下载文件的实例方法
2020/07/19 Python
canvas里面如何基于随机点绘制一个多边形的方法
2018/06/13 HTML / CSS
5分钟实现Canvas鼠标跟随动画背景
2019/11/18 HTML / CSS
百思买美国官网:Best Buy
2016/07/28 全球购物
UGG雪地靴荷兰官网:UGG荷兰
2016/09/09 全球购物
自我评价范文分享
2014/01/04 职场文书
干部鉴定材料
2014/05/18 职场文书
市场营销计划书
2019/04/24 职场文书
浅谈JS的原型和原型链
2021/06/04 Javascript
如何理解python接口自动化之logging日志模块
2021/06/15 Python
Java中try catch处理异常示例
2021/12/06 Java/Android
JavaScript模拟实现网易云轮播效果
2022/04/04 Javascript