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


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 相关文章推荐
Javascript - HTML的request类
Jan 09 Javascript
静态页面下用javascript操作ACCESS数据库(读增改删)的代码
May 14 Javascript
jQuery EasyUI 中文API Layout(Tabs)
Apr 27 Javascript
JQuery each打印JS对象的方法
Nov 13 Javascript
jquery选择器之层级过滤选择器详解
Jan 27 Javascript
js取整数、取余数的方法
May 11 Javascript
JavaScript中的变量作用域介绍
Dec 31 Javascript
在JavaScript中call()与apply()区别
Jan 22 Javascript
JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例
Jan 26 Javascript
JavaScript仿商城实现图片广告轮播实例代码
Feb 06 Javascript
jQuery Ajax全解析
Feb 13 Javascript
es6中使用map简化复杂条件判断操作实例详解
Feb 19 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
PHP生成月历代码
2007/06/14 PHP
PHP之数组学习
2011/05/29 PHP
php在linux下检测mysql同步状态的方法
2015/01/15 PHP
thinkphp微信开之安全模式消息加密解密不成功的解决办法
2015/12/02 PHP
JS简单计算器实例
2015/01/20 Javascript
jQuery实现淡入淡出二级下拉导航菜单的方法
2015/08/28 Javascript
jquery实现列表上下移动功能
2016/02/25 Javascript
JavaScript 定时器 SetTimeout之定时刷新窗口和关闭窗口(代码超简单)
2016/02/26 Javascript
javascript 中设置window.location.href跳转无效问题解决办法
2017/02/09 Javascript
使用Bootstrap打造特色进度条效果
2017/05/02 Javascript
JavaScript实现焦点进入文本框内关闭输入法的核心代码
2017/09/20 Javascript
微信小程序实现图片压缩功能
2018/01/26 Javascript
JS集合set类的实现与使用方法示例
2019/02/01 Javascript
详解基于iview-ui的导航栏路径(面包屑)配置
2019/02/22 Javascript
jQuery实现回到顶部效果
2020/10/19 jQuery
Python自动化运维_文件内容差异对比分析
2017/12/13 Python
python 获取url中的参数列表实例
2018/12/18 Python
对python特殊函数 __call__()的使用详解
2019/07/02 Python
python openCV获取人脸部分并存储功能
2019/08/28 Python
Django 实现Admin自动填充当前用户的示例代码
2019/11/18 Python
tensorflow estimator 使用hook实现finetune方式
2020/01/21 Python
基于Tensorflow读取MNIST数据集时网络超时的解决方式
2020/06/22 Python
Python matplotlib图例放在外侧保存时显示不完整问题解决
2020/07/28 Python
python“静态”变量、实例变量与本地变量的声明示例
2020/11/13 Python
基于OpenCV的网络实时视频流传输的实现
2020/11/15 Python
canvas简易绘图的实现(海绵宝宝篇)
2018/07/04 HTML / CSS
佛罗里达州印第安河新鲜水果:Hale Groves
2017/02/20 全球购物
阿迪达斯印度官方商城:adidas India
2017/03/26 全球购物
马德里运动鞋商店:Nigra Mercato
2020/02/16 全球购物
别名指示符是什么
2012/10/08 面试题
肯尼迪就职演说稿
2013/12/31 职场文书
店长职务说明书
2014/02/04 职场文书
团日活动总结报告
2014/06/25 职场文书
草房子读书笔记
2015/06/29 职场文书
党组织结对共建协议书
2016/03/23 职场文书
详解MySQL InnoDB存储引擎的内存管理
2021/04/08 MySQL