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


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中的私有成员
Sep 18 Javascript
Javascript中的isNaN函数使用说明
Nov 10 Javascript
jQuery 追加元素的方法如append、prepend、before
Jan 16 Javascript
使用js显示当前时间示例
Mar 02 Javascript
javascript操作数组详解
Dec 17 Javascript
javascript实现简单查找与替换的方法
Jul 22 Javascript
javascript另类方法实现htmlencode()与htmldecode()函数实例分析
Nov 17 Javascript
Canvas实现动态的雪花效果
Feb 13 Javascript
文本溢出插件jquery.dotdotdot.js使用方法详解
Jun 22 jQuery
AngularJS中重新加载当前路由页面的方法
Mar 09 Javascript
解决axios会发送两次请求,有个OPTIONS请求的问题
Oct 25 Javascript
简单了解JavaScript作用域
Jul 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 水平的题目
2007/05/30 PHP
PHP 获取远程网页内容的代码(fopen,curl已测)
2011/06/06 PHP
PHP中__get()和__set()的用法实例详解
2013/06/04 PHP
PHP empty函数报错解决办法
2014/03/06 PHP
php parse_str() 函数的定义和用法
2016/05/23 PHP
php+redis实现注册、删除、编辑、分页、登录、关注等功能示例
2017/02/15 PHP
PHP单例模式与工厂模式详解
2017/08/29 PHP
PHP PDOStatement::errorInfo讲解
2019/01/31 PHP
用javascript父窗口控制只弹出一个子窗口
2007/04/10 Javascript
jquery select多选框的左右移动 具体实现代码
2013/07/03 Javascript
纯css+js写的一个简单的tab标签页带样式
2014/01/28 Javascript
Jquery给基本控件的取值、赋值示例
2014/05/23 Javascript
PHP+jQuery实现随意拖动层并即时保存拖动位置
2015/04/30 Javascript
jQuery右下角旋转环状菜单特效代码
2015/08/10 Javascript
jquery判断复选框是否被选中的方法
2015/10/16 Javascript
js实现纯前端的图片预览
2016/04/27 Javascript
ReactNative页面跳转实例代码
2016/09/27 Javascript
基于javascript实现按圆形排列DIV元素(二)
2016/12/02 Javascript
JavaScript实现QQ列表展开收缩扩展功能
2017/10/30 Javascript
小程序自定义日历效果
2018/12/29 Javascript
JS加载解析Markdown文档过程详解
2020/05/19 Javascript
小程序实现列表倒计时功能
2021/01/29 Javascript
[44:40]2018DOTA2亚洲邀请赛3月30日 小组赛A组Liquid VS OG
2018/03/31 DOTA
python之DataFrame实现excel合并单元格
2021/02/22 Python
python使用zip将list转为json的方法
2018/12/31 Python
Python下划线5种含义代码实例解析
2020/07/10 Python
加拿大购物频道:The Shopping Channel
2016/07/21 全球购物
家长对学生的评语
2014/04/18 职场文书
生物技术专业求职信
2014/06/10 职场文书
继承权公证书范本
2015/01/23 职场文书
个性发展自我评价2015
2015/03/09 职场文书
2016元旦晚会主持人开场白和结束语
2015/12/03 职场文书
老舍《猫》教学反思
2016/02/17 职场文书
写作技巧:怎样写好一份优秀工作总结?
2019/08/14 职场文书
Golang之sync.Pool使用详解
2021/05/06 Golang
spring cloud eureka 服务启动失败的原因分析及解决方法
2022/03/17 Java/Android