1.

一种比较常见的功能获取手机验证码

2.

先看效果图：

3.

其实这个功能实现起来很简单，主要就是调取第三方接口，拿到返回值验证的问题

4.

直接上代码吧：

viewclass'changeInfo'viewclass'changeInfoName'inputplaceholder'请输入姓名'bindinput'getNameValue'value'{{name}}'//viewviewclass'changeInfoName'inputplaceholder'请输入手机号'bindinput'getPhoneValue'value'{{phone}}'//viewviewclass'changeInfoName'inputplaceholder'请输验证码'bindinput'getCodeValue'value'{{code}}'style'width:70%;'/buttonclass'codeBtn'bindtap'getVerificationCode'disabled'{{disabled}}'{{codename}}/button/viewbuttonclass'changeBtn'bindtap'save'保存/button/viewpage{height:100%;width:100%;background:linear-gradient(#5681d7,#486ec3);}.changeInfo{display:flex;flex-direction:column;justify-content:space-between;width:90%;margin:50rpxauto;}.changeInfoName{position:relative;height:80rpx;width:100%;border-radius:10rpx;background:#fff;margin-bottom:20rpx;padding-left:20rpx;box-sizing:border-box;}.codeBtn{position:absolute;right:0;top:0;color:#bbb;width:30%;font-size:26rpx;height:80rpx;line-height:80rpx;}.changeInfoNameinput{width:100%;height:100%;}.changeBtn{width:40%;height:100rpx;background:#fff;color:#000;border-radius:50rpx;position:absolute;bottom:10%;left:50%;margin-left:-20%;line-height:100rpx;}varapprequire('../../resource/js/util.js');Page({/***页面的初始数据*/data:{name:'',//姓名phone:'',//手机号code:'',//验证码iscode:null,//用于存放验证码接口里获取到的codecodename:'获取验证码'},//获取input输入框的值getNameValue:function(e){this.setData({name:e.detail.value})},getPhoneValue:function(e){this.setData({phone:e.detail.value})},getCodeValue:function(e){this.setData({code:e.detail.value})},getCode:function(){varathis.data.phone;var_thisthis;varmyreg/^(14[0-9]|13[0-9]|15[0-9]|17[0-9]|18[0-9])d{8}$$/;if(this.data.phone""){wx.showToast({title:'手机号不能为空',icon:'none',duration:1000})returnfalse;}elseif(!myreg.test(this.data.phone)){wx.showToast({title:'请输入正确的手机号',icon:'none',duration:1000})returnfalse;}else{wx.request({data:{},'url':接口地址,success(res){console.log(res.data.data)_this.setData({iscode:res.data.data})varnum61;vartimersetInterval(function(){num--;if(num0){clearInterval(timer);_this.setData({codename:'重新发送',disabled:false})}else{_this.setData({codename:num+"s"})}},1000)}})}},//获取验证码getVerificationCode(){this.getCode();var_thisthis_this.setData({disabled:true})},//提交表单信息save:function(){varmyreg/^(14[0-9]|13[0-9]|15[0-9]|17[0-9]|18[0-9])d{8}$$/;if(this.data.name""){wx.showToast({title:'姓名不能为空',icon:'none',duration:1000})returnfalse;}if(this.data.phone""){wx.showToast({title:'手机号不能为空',icon:'none',duration:1000})returnfalse;}elseif(!myreg.test(this.data.phone)){wx.showToast({title:'请输入正确的手机号',icon:'none',duration:1000})returnfalse;}if(this.data.code""){wx.showToast({title:'验证码不能为空',icon:'none',duration:1000})returnfalse;}elseif(this.data.code!this.data.iscode){wx.showToast({title:'验证码错误',icon:'none',duration:1000})returnfalse;}else{wx.setStorageSync('name',this.data.name);wx.setStorageSync('phone',this.data.phone);wx.redirectTo({url:'../add/add',})}},/***生命周期函数--监听页面加载*/onLoad:function(options){},/***生命周期函数--监听页面初次渲染完成*/onReady:function(){},/***生命周期函数--监听页面显示*/onShow:function(){},/***生命周期函数--监听页面隐藏*/onHide:function(){},/***生命周期函数--监听页面卸载*/onUnload:function(){},/***页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh:function(){},/***页面上拉触底事件的处理函数*/onReachBottom:function(){},/***用户点击右上角分享*/onShareAppMessage:function(){}})5.

想要获得更多资料的请微信搜索公众号【热血科技】，关注一下即可。