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


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数组常用操作技巧汇总
Nov 17 Javascript
javascript实现连续赋值
Aug 10 Javascript
移动端脚本框架Hammer.js
Dec 15 Javascript
ES6中Iterator与for..of..遍历用法分析
Mar 31 Javascript
微信小程序中页面FOR循环和嵌套循环
Jun 21 Javascript
关于JavaScript语句后面的分号问题
Dec 07 Javascript
vue.js数据绑定操作详解
Apr 23 Javascript
Vue路由守卫之路由独享守卫
Sep 25 Javascript
手把手带你入门微信小程序新框架Kbone的使用
Feb 25 Javascript
JS替换字符串中指定位置的字符(多种方法)
May 28 Javascript
手机浏览器唤起微信分享(JS)
Oct 11 Javascript
JavaScript TAB栏切换效果的示例
Nov 05 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开发负载均衡指南
2010/07/17 PHP
利用PHP如何统计Nginx日志的User Agent数据
2019/03/06 PHP
PHP保留两位小数的几种方法
2019/07/24 PHP
JavaScript 学习笔记二 字符串拼接
2010/03/28 Javascript
用原生JavaScript实现jQuery的$.getJSON的解决方法
2013/05/03 Javascript
javasciprt下jquery函数$.post执行无响应的解决方法
2014/03/13 Javascript
使用jQuery重置(reset)表单的方法
2014/05/05 Javascript
jQuery操作JSON的CRUD用法实例
2015/02/25 Javascript
jQuery插件MixItUp实现动画过滤和排序
2015/04/12 Javascript
javascript特殊日历控件分享
2016/03/07 Javascript
js获取时间精确到秒(年月日)
2016/03/16 Javascript
动态加载JavaScript文件的两种方法
2016/04/22 Javascript
深入浅析JavaScript中的Function类型
2016/07/09 Javascript
JS实现拖动滚动条评分的效果代码分享
2016/09/29 Javascript
JavaScript中in和hasOwnProperty区别详解
2017/08/04 Javascript
JS倒计时实例_天时分秒
2017/08/22 Javascript
关于axios不能使用Vue.use()浅析
2018/01/12 Javascript
vue.js将时间戳转化为日期格式的实现代码
2018/06/05 Javascript
微信小程序bindtap事件与冒泡阻止详解
2019/08/08 Javascript
基于layui轮播图满屏是高度自适应的解决方法
2019/09/16 Javascript
JS随机密码生成算法
2019/09/23 Javascript
axios 实现post请求时把对象obj数据转为formdata
2019/10/31 Javascript
Django项目使用CircleCI的方法示例
2019/07/14 Python
Python制作微信好友背景墙教程(附完整代码)
2019/07/17 Python
python实现飞机大战小游戏
2019/11/08 Python
阿姆斯特丹杜莎夫人蜡像馆官方网站:Madame Tussauds Amsterdam
2019/03/12 全球购物
Tomcat的缺省是多少,怎么修改
2014/04/09 面试题
十岁生日同学答谢词
2014/01/19 职场文书
计算机通信专业推荐信
2014/02/22 职场文书
资金主管岗位职责范本
2014/03/04 职场文书
安全保证书范文
2014/04/29 职场文书
小组口号大全
2014/06/09 职场文书
做一个有道德的人活动方案
2014/08/25 职场文书
家庭教育培训学习心得体会
2016/01/14 职场文书
导游词之苏州盘门景区
2019/11/12 职场文书
SQL Server中常用截取字符串函数介绍
2022/03/16 SQL Server