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


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 相关文章推荐
jquery弹出框的用法示例(2)
Aug 26 Javascript
浅析jquery的js图表组件highcharts
Mar 06 Javascript
JavaScript中诡异的delete操作符
Mar 12 Javascript
javascript实现右侧弹出“分享到”窗口效果
Feb 01 Javascript
AngularJS入门教程之ng-checked 指令详解
Aug 01 Javascript
Angular在一个页面中使用两个ng-app的方法(二)
Feb 20 Javascript
原生JS实现的轮播图功能详解
Aug 06 Javascript
AngularJS修改model值时,显示内容不变的实例
Sep 13 Javascript
element ui table(表格)实现点击一行展开功能
Dec 04 Javascript
JavaScript JSON数据处理全集(小结)
Aug 15 Javascript
jQuery实现全选、反选和不选功能的方法详解
Dec 04 jQuery
JavaScript进阶(三)闭包原理与用法详解
May 09 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
php max_execution_time执行时间问题
2011/07/17 PHP
php计算一个文件大小的方法
2015/03/30 PHP
CodeIgniter连贯操作的底层原理分析
2016/05/17 PHP
js创建对象的方式总结
2015/01/10 Javascript
jQuery选择id属性带有点符号元素的方法
2015/03/17 Javascript
Jquery全选与反选点击执行一次的解决方案
2015/08/14 Javascript
jQuery网页版打砖块小游戏源码分享
2015/08/20 Javascript
纯javascript实现自动发送邮件
2015/10/21 Javascript
基于vue.js轮播组件vue-awesome-swiper实现轮播图
2017/03/17 Javascript
EasyUI Datebox 日期验证之开始日期小于结束时间
2017/05/19 Javascript
深入理解JavaScript 参数按值传递
2017/05/24 Javascript
基于LayUI分页和LayUI laypage分页的使用示例
2017/08/02 Javascript
Bootstrap4 gulp 配置详解
2019/01/06 Javascript
微信小程序npm引入vant-weapp的踩坑记录
2019/08/01 Javascript
深入学习Vue nextTick的用法及原理
2019/10/08 Javascript
vue 实现强制类型转换 数字类型转为字符串
2019/11/07 Javascript
Vuex模块化应用实践示例
2020/02/03 Javascript
在VUE style中使用data中的变量的方法
2020/06/19 Javascript
[47:26]完美世界DOTA2联赛 LBZS vs Forest 第二场 11.07
2020/11/09 DOTA
Python3中的2to3转换工具使用示例
2015/06/12 Python
win8下python3.4安装和环境配置图文教程
2018/07/31 Python
python 进程间数据共享multiProcess.Manger实现解析
2019/09/23 Python
python列表生成器迭代器实例解析
2019/12/19 Python
python输出国际象棋棋盘的实例分享
2020/11/26 Python
前端实现弹幕效果的方法总结(包含css3和canvas的实现方式)
2018/07/12 HTML / CSS
请写出char *p与"零值"比较的if语句
2014/09/24 面试题
JVM是一个编译程序还是解释程序
2012/09/11 面试题
数学专业毕业生自荐信
2013/11/10 职场文书
入党推优材料
2014/06/02 职场文书
教师群众路线学习心得体会
2014/11/04 职场文书
2015年银行员工工作总结
2015/04/24 职场文书
毕业感言怎么写
2015/07/31 职场文书
python实现的web监控系统
2021/04/27 Python
十大最强火系宝可梦,喷火龙上榜,第一名有双火属性
2022/03/18 日漫
Java Spring Boot 正确读取配置文件中的属性的值
2022/04/20 Java/Android
nginx 添加http_stub_status_module模块
2022/05/25 Servers