微信小程序发送短信验证码完整实例
网络编程 2021-07-04 15:49www.168986.cn编程入门
这篇文章主要介绍了微信小程序发送短信验证码完整实例,实现发送短信验证码,带60秒倒计时功能,无需服务器端,非常具有实用价值,需要的朋友可以参考下
微信小程序注册完整实例,发送短信验证码,带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.', '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; : 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; }
完整下载:
详情参考:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持狼蚁SEO。
上一篇:jQuery实现的简单歌词滚动功能示例
下一篇:JS数组求和的常用方法实例小结
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程