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


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 相关文章推荐
去除链接虚线全面分析总结
Aug 15 Javascript
javascript字典探测用户名工具
Oct 05 Javascript
基于jQuery的为attr添加id title等效果的实现代码
Apr 20 Javascript
Javascript中的异步编程规范Promises/A详细介绍
Jun 06 Javascript
javascript查询字符串参数的方法
Jan 28 Javascript
详解AngularJS中的依赖注入机制
Jun 17 Javascript
JQuery解析XML的方法小结
Apr 02 Javascript
JavaScript实现窗口抖动效果
Oct 19 Javascript
简单谈谈Javascript函数中的arguments
Feb 09 Javascript
10道典型的JavaScript面试题
Mar 22 Javascript
Vue+abp微信扫码登录的实现代码示例
Jan 06 Javascript
VUE实时监听元素距离顶部高度的操作
Jul 29 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
mysql建立外键
2006/11/25 PHP
PHP语法自动检查的Vim插件
2014/08/11 PHP
php实现的通用图片处理类
2015/03/24 PHP
php获取twitter最新消息的方法
2015/04/14 PHP
PHP用函数嵌入网站访问量计数器
2017/10/27 PHP
JQueryEasyUI datagrid框架的基本使用
2013/04/08 Javascript
jQuery解决下拉框select设宽度时IE 6/7/8下option超出显示不全
2013/05/27 Javascript
基于jquery自定义的漂亮单选按钮RadioButton
2013/11/19 Javascript
JQuery中Text方法用法实例分析
2015/05/18 Javascript
介绍JavaScript的一个微型模版
2015/06/24 Javascript
详解在Vue中如何使用axios跨域访问数据
2017/07/07 Javascript
基于Vue自定义指令实现按钮级权限控制思路详解
2018/05/23 Javascript
JavaScript遍历数组的三种方法map、forEach与filter实例详解
2019/02/27 Javascript
利用React高阶组件实现一个面包屑导航的示例
2020/08/23 Javascript
Python中函数参数设置及使用的学习笔记
2016/05/03 Python
浅谈python新手中常见的疑惑及解答
2016/06/14 Python
简单实现python进度条脚本
2017/12/18 Python
Python判断中文字符串是否相等的实例
2018/07/06 Python
pygame游戏之旅 创建游戏窗口界面
2018/11/20 Python
NumPy 数组使用大全
2019/04/25 Python
Django之路由层的实现
2019/09/09 Python
Python多线程获取返回值代码实例
2020/02/17 Python
在Python中使用K-Means聚类和PCA主成分分析进行图像压缩
2020/04/10 Python
Python捕获异常堆栈信息的几种方法(小结)
2020/05/18 Python
Ubuntu 20.04安装Pycharm2020.2及锁定到任务栏的问题(小白级操作)
2020/10/29 Python
Python通过Schema实现数据验证方式
2020/11/12 Python
anaconda升级sklearn版本的实现方法
2021/02/22 Python
eBay英国购物网站:eBay.co.uk
2019/06/19 全球购物
自考自我鉴定范文
2013/10/30 职场文书
《晏子使楚》教学反思
2014/02/08 职场文书
一月红领巾广播稿
2014/02/11 职场文书
工厂门卫岗位职责范本
2014/04/04 职场文书
党的群众路线教育实践活动个人对照检查材料(企业)
2014/11/05 职场文书
2014高三学生考试作弊检讨书
2014/12/14 职场文书
SSM VUE Axios详解
2021/10/05 Vue.js
高性能跳频抗干扰宽带自组网电台
2022/02/18 无线电