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


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判断变量是否为空的自定义函数分享
Jan 31 Javascript
网页禁用右键菜单和鼠标拖动选择方法小结
Feb 25 Javascript
浅谈document.write()输出样式
May 07 Javascript
简介JavaScript中的setDate()方法的使用
Jun 11 Javascript
jQuery仿淘宝网产品品牌隐藏与显示效果
Sep 01 Javascript
关于原生js中bind函数的简单实现
Aug 10 Javascript
删除table表格行的实例讲解
Sep 21 Javascript
微信小程序返回多级页面的实现方法
Oct 27 Javascript
在vue2.0中引用element-ui组件库的方法
Jun 21 Javascript
vue中多个倒计时实现代码实例
Mar 27 Javascript
Vue时间轴 vue-light-timeline的用法说明
Oct 29 Javascript
使用AutoJs实现微信抢红包的代码
Dec 31 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将数据库导出成excel的方法
2010/05/07 PHP
php中将字符串转为HTML的实体引用的一个类
2013/02/03 PHP
php发送html格式文本邮件的方法
2015/06/10 PHP
PHP中substr函数字符串截取用法分析
2016/01/07 PHP
showModelessDialog()使用详解
2006/09/21 Javascript
JQuery SELECT单选模拟jQuery.select.js
2009/11/12 Javascript
JavaScript图片放大技术(放大镜)实现代码分享
2013/11/14 Javascript
javascript生成随机数的方法
2014/05/16 Javascript
js脚本获取webform服务器控件的方法
2014/05/16 Javascript
javascript获取当前的时间戳的方法汇总
2015/07/26 Javascript
JavaScript简单下拉菜单特效
2016/09/13 Javascript
jQuery层级选择器实例代码
2017/02/06 Javascript
js es6系列教程 - 新的类语法实战选项卡(详解)
2017/09/02 Javascript
jQuery实现可兼容IE6的遮罩功能详解
2017/09/19 jQuery
微信小程序实现跑马灯效果
2020/10/21 Javascript
ES6 Promise对象概念及用法实例详解
2019/10/15 Javascript
vue实现表单未编辑或未保存离开弹窗提示功能
2020/04/08 Javascript
UEditor 自定义图片视频尺寸校验功能的实现代码
2020/10/20 Javascript
python登录QQ邮箱发信的实现代码
2013/02/10 Python
python使用append合并两个数组的方法
2015/04/28 Python
解决Pandas to_json()中文乱码,转化为json数组的问题
2018/05/10 Python
Python实现的大数据分析操作系统日志功能示例
2019/02/11 Python
Django框架会话技术实例分析【Cookie与Session】
2019/05/24 Python
使用pyinstaller逆向.pyc文件
2019/12/20 Python
python爬虫开发之selenium模块详细使用方法与实例全解
2020/03/09 Python
解决python父线程关闭后子线程不关闭问题
2020/04/25 Python
Python如何将函数值赋给变量
2020/04/28 Python
python 实现aes256加密
2020/11/27 Python
HTML5实时语音通话聊天MP3压缩传输3KB每秒
2019/08/28 HTML / CSS
中国电子产品批发商/跨境电商/外贸网:Sunsky-online
2020/04/20 全球购物
优秀演讲稿范文
2013/12/29 职场文书
电脑饰品店的创业计划书
2014/01/21 职场文书
高一数学教学反思
2014/02/07 职场文书
英语课前三分钟演讲稿
2014/08/19 职场文书
开展党的群众路线教育实践活动情况汇报
2014/11/05 职场文书
SQL Server2019数据库之简单子查询的具有方法
2021/04/27 SQL Server