微信小程序发送短信验证码完整实例


Posted in Javascript onJanuary 07, 2019

微信小程序注册完整实例,发送短信验证码,带60秒倒计时功能,无需服务器端。效果图:

微信小程序发送短信验证码完整实例

代码:

index.wxml

<!--index.wxml-->
<view class="container">
 <view class='row'>
   <input placeholder='请输入姓名' bindinput='bindNameInput'/> 
 </view>
 
 <view class='row'>
   <input placeholder='请输入手机号' bindinput='bindPhoneInput'/> 
 </view>
 <view class='row'>
   <input placeholder='请输验证码' bindinput='bindCodeInput' style='width:70%;'/> 
   <button class='codeBtn' bindtap='getCode' hidden='{{hidden}}' disabled='{{btnDisabled}}'>{{btnValue}}</button>
 </view>
 <view>
   <button class='save' bindtap='save' >保存</button>
 </view>
 
</view>

index.js

//index.js
var zhenzisms = require('../../utils/zhenzisms.js');
//获取应用实例
const app = getApp();
 
Page({
 data: {
  hidden: true,
  btnValue:'',
  btnDisabled:false,
  name: '',
  phone: '',
  code: '',
  second: 60
 },
 onLoad: function () {
  
 },
 //姓名输入
 bindNameInput(e) {
  this.setData({
   name: e.detail.value
  })
 },
 //手机号输入
 bindPhoneInput(e) {
  console.log(e.detail.value);
  var val = e.detail.value;
  this.setData({
   phone: val
  })
  if(val != ''){
   this.setData({
    hidden: false,
    btnValue: '获取验证码'
   })
  }else{
   this.setData({
    hidden: true
   })
  }
 },
 //验证码输入
 bindCodeInput(e) {
  this.setData({
   code: e.detail.value
  })
 },
 //获取短信验证码
 getCode(e) {
  console.log('获取验证码');
  var that = this;
  zhenzisms.client.init('https://sms_developer.zhenzikj.com', 'appId', 'appSecret');
  zhenzisms.client.send(function (res) {
   if(res.data.code == 0){
    that.timer();
    return ;
   }
   wx.showToast({
    title: res.data.data,
    icon: 'none',
    duration: 2000
   })
  }, '15801636347', '验证码为:3322');
  
 },
 timer: function () {
  let promise = new Promise((resolve, reject) => {
   let setTimer = setInterval(
    () => {
     var second = this.data.second - 1;
     this.setData({
      second: second,
      btnValue: second+'秒',
      btnDisabled: true
     })
     if (this.data.second <= 0) {
      this.setData({
       second: 60,
       btnValue: '获取验证码',
       btnDisabled: false
      })
      resolve(setTimer)
     }
    }
    , 1000)
  })
  promise.then((setTimer) => {
   clearInterval(setTimer)
  })
 },
 //保存
 save(e) {
  console.log('姓名: ' + this.data.name);
  console.log('手机号: ' + this.data.phone);
  console.log('验证码: ' + this.data.code);
 
   //省略提交过程
 }
})

index.wxss

/**index.wxss**/
page{
 height: 100%;
 width: 100%;
 background: linear-gradient(#5681d7, #486ec3);
 display: flex;
 flex-direction: column;
}
.container{
 display: flex;
 flex-direction: column;
 justify-content: space-around;
 width: 90%;
 margin: 50rpx auto;
}
 
.row{
 position: relative;
 height: 80rpx;
 width: 100%;
 border-radius: 10rpx;
 background: #fff;
 margin-bottom: 20rpx;
 padding-left: 20rpx;
 box-sizing: border-box;
}
.row input{
 width: 100%;
 height:100%;
}
.codeBtn{
 position: absolute;
 right: 0;
 top: 0;
 color: #bbb;
 width: 30%;
 font-size: 26rpx;
 height: 80rpx;
 line-height: 80rpx;
}
.subBtn{
 width: 200rpx;
 height: 80rpx;
 background: #fff;
 color: #000;
 border-radius: 50rpx;
 line-height: 80rpx;
}

完整下载: 下载

详情参考: http://smsow.zhenzikj.com/doc/sdk.html

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript 函数中的参数使用分析
Mar 27 Javascript
Jquery AJAX POST与GET之间的区别
Nov 14 Javascript
jquery和js实现对div的隐藏和显示方法
Sep 26 Javascript
js游戏人物上下左右跑步效果代码分享
Aug 28 Javascript
js判断当前页面在移动设备还是在PC端中打开
Jan 06 Javascript
JavaScript函数内部属性和函数方法实例详解
Mar 17 Javascript
jQuery实现下拉框多选 jquery-multiselect 的实例代码
Jul 14 Javascript
Three.js学习之正交投影照相机
Aug 01 Javascript
bootstrap+jQuery实现的动态进度条功能示例
May 25 jQuery
强大的JavaScript响应式图表Chartist.js的使用
Sep 13 Javascript
解决vue2中使用axios http请求出现的问题
Mar 05 Javascript
Mpvue中使用Vant Weapp组件库的方法步骤
May 16 Javascript
JS数组求和的常用方法实例小结
Jan 07 #Javascript
Node.js 如何利用异步提升任务处理速度
Jan 07 #Javascript
vue封装一个简单的div框选时间的组件的方法
Jan 06 #Javascript
如何封装了一个vue移动端下拉加载下一页数据的组件
Jan 06 #Javascript
浅谈在Vue.js中如何实现时间转换指令
Jan 06 #Javascript
浅谈Vue.js中如何实现自定义下拉菜单指令
Jan 06 #Javascript
react-router4按需加载(踩坑填坑)
Jan 06 #Javascript
You might like
自己做矿石收音机
2021/03/02 无线电
PHP获取远程图片并保存到本地的方法
2015/05/12 PHP
PHP获取音频文件的相关信息
2015/06/22 PHP
PHP实现驼峰样式字符串(首字母大写)转换成下划线样式字符串的方法示例
2017/08/10 PHP
JQUBar 基于JQUERY的柱状图插件
2010/11/23 Javascript
js网页版计算器的简单实现
2013/07/02 Javascript
Node.js抓取中文网页乱码问题和解决方法
2015/02/10 Javascript
javascript基本包装类型介绍
2015/04/10 Javascript
HTML5 Shiv完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法
2015/11/25 Javascript
原生js实现新闻列表展开/收起全文功能
2017/01/20 Javascript
Vue.js实现多条件筛选、搜索、排序及分页的表格功能
2020/11/24 Javascript
Node.js开发第三方微信公众平台
2017/06/05 Javascript
Vue实例中生命周期created和mounted的区别详解
2017/08/25 Javascript
vue项目动态设置页面title及是否缓存页面的问题
2018/11/08 Javascript
[01:08:29]DOTA2-DPC中国联赛定级赛 RNG vs Aster BO3第一场 1月9日
2021/03/11 DOTA
python自动翻译实现方法
2016/05/28 Python
对Python协程之异步同步的区别详解
2019/02/19 Python
查看python安装路径及pip安装的包列表及路径
2019/04/03 Python
python,Django实现的淘宝客登录功能示例
2019/06/12 Python
Python协程操作之gevent(yield阻塞,greenlet),协程实现多任务(有规律的交替协作执行)用法详解
2019/10/14 Python
python 利用turtle库绘制笑脸和哭脸的例子
2019/11/23 Python
对tensorflow中的strides参数使用详解
2020/01/04 Python
Python3实现发送邮件和发送短信验证码功能
2020/01/07 Python
在pycharm中实现删除bookmark
2020/02/14 Python
结束运行python的方法
2020/06/16 Python
pycharm 添加解释器的方法步骤
2020/08/31 Python
使用Canvas操作像素的方法
2018/06/14 HTML / CSS
HTML5 的新的表单元素(datalist/keygen/output)使用介绍
2013/07/19 HTML / CSS
学生就业推荐信
2013/11/13 职场文书
银行竞聘演讲稿
2014/05/16 职场文书
企业委托书范本
2014/09/13 职场文书
出差报告格式模板
2014/11/06 职场文书
优秀小学生事迹材料
2014/12/26 职场文书
建党伟业的观后感
2015/06/01 职场文书
个人收入证明范本
2015/06/12 职场文书
Python中的matplotlib绘制百分比堆叠柱状图,并为每一个类别设置不同的填充图案
2022/04/20 Python