微信小程序注册完整实例,发送短信验证码,带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; }
完整下载:
详情参考:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持移动技术网。
如对本文有疑问, 点击进行留言回复!!
offset、client、scroll (width,height、left,top、X,Y)
网友评论