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


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 相关文章推荐
jquery的extend和fn.extend的使用说明
Jan 09 Javascript
jQuery版Tab标签切换
Mar 16 Javascript
JS拖拽插件实现步骤
Aug 03 Javascript
jQuery实现的类似淘宝网站搜索框样式代码分享
Aug 24 Javascript
JS原型、原型链深入理解
Feb 27 Javascript
bootstrap布局中input输入框右侧图标点击功能
May 16 Javascript
Javascript基础回顾之(二) js作用域
Jan 31 Javascript
javaScript手机号码校验工具类PhoneUtils详解
Dec 08 Javascript
vue的mixins属性详解
Mar 14 Javascript
vue如何在自定义组件中使用v-model
May 14 Javascript
jQuery实现的简单手风琴效果示例
Aug 29 jQuery
浅谈Vue.js中如何实现自定义下拉菜单指令
Jan 06 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
codeigniter教程之上传视频并使用ffmpeg转flv示例
2014/02/13 PHP
php+mysql实现的二级联动菜单效果详解
2016/05/10 PHP
PHP简单获取随机数的常用方法小结
2017/06/07 PHP
PHP十六进制颜色随机生成器功能示例
2017/07/24 PHP
JQuery困惑—包装集 DOM节点
2009/10/16 Javascript
jquery中常用的函数和属性详细解析
2014/03/07 Javascript
javascript在网页中实现读取剪贴板粘贴截图功能
2014/06/07 Javascript
完美兼容各大浏览器获取HTTP_REFERER方法总结
2014/06/24 Javascript
node.js中的http.response.writeHead方法使用说明
2014/12/14 Javascript
JS获取iframe中longdesc属性的方法
2015/04/01 Javascript
jquery+json实现动态商品内容展示的方法
2016/01/14 Javascript
讲解JavaScript的Backbone.js框架的MVC结构设计理念
2016/02/14 Javascript
jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码
2017/03/21 jQuery
基于bootstrap按钮式下拉菜单组件的搜索建议插件
2017/03/25 Javascript
vue.js自定义组件directives的实例代码
2018/11/09 Javascript
layer.alert自定义关闭回调事件的方法
2019/09/27 Javascript
[50:45]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs TNC 第一场
2018/04/10 DOTA
Python的Django框架中的Context使用
2015/07/15 Python
python中的随机函数random的用法示例
2018/01/27 Python
对Python 两大环境管理神器 pyenv 和 virtualenv详解
2018/12/31 Python
python使用PIL实现多张图片垂直合并
2019/01/15 Python
python pandas利用fillna方法实现部分自动填充功能
2020/03/16 Python
CSS3中引入多种自定义字体font-face
2020/06/12 HTML / CSS
英国花园家具中心:Garden Furniture Centre
2017/08/24 全球购物
德国足球商店:OUTFITTER
2019/05/06 全球购物
纯净、自信、100%的羊绒服装:360Cashmere
2021/02/20 全球购物
求职简历自荐信
2013/10/20 职场文书
医学类个人求职信范文
2014/02/05 职场文书
宣传口号大全
2014/06/16 职场文书
国际商务专业求职信
2014/07/15 职场文书
幼儿园六一主持词
2015/06/30 职场文书
寒假生活随笔
2015/08/15 职场文书
会计主管竞聘书
2015/09/15 职场文书
Nginx快速入门教程
2021/03/31 Servers
python之json文件转xml文件案例讲解
2021/08/07 Python
Golang 链表的学习和使用
2022/04/19 Golang