微信小程序的注册页面包含倒计时验证码、获取用户信息

1、页面展示

2、wxml代码

！-页面/寄存器/寄存器。wxml-scroll-view image src='/images/register。' png ' mode=' width fix ' class=' topImage '/image view class=' input-top ' input id=' telphone ' maxlength=' 11 ' type=' text ' placeholder='请输入手机号绑定输入=' inputPhoneNum '/text wx : if=' { {！send } } ' bind tap=' send msg ' class=' send msg '获取验证码/text text wx : if=' { { send } } ' class=' send msg ' bind tap=' send msg ' {第二个} }/text/view view class=' input-button ' input id=' captcha ' type=' number ' maxlength=' 4 ' placeholder='请输入四位验证码bind input=' input code '/view button class=' BTN ' open-type=' getUserInfo ' bind getUserInfo=' ongotserinfo ' lang=' zh _ CN '立即用伞/button view class=' protocol ' text class=' protocol-left '点击立即用伞即表示同意/text text class=' protocol-right ' 《共享雨伞租赁服务协议》/text/view/scroll-view 3、wxss代码

第{ background: # f0eff4}。主题图像{宽度： 100%;height: auto}。输入-顶部，input-buttonm { font-size : 30 rpx；左衬垫： 30 rpxmargin: 0rpx 20rpx背景-颜色：白色；高度： 70rpx}。输入-顶部{ flex-direction : row；display : flex justice-content :空格；保证金-底部： 1px保证金-top : 20 rpx；}#telphone，# captcha { height: 70rpx}。发送消息{行高： 70 rpx右边距： 30 rpxcolor: # f9b400}。btn { margin: 0rpx 20rpx背景-颜色： # f9b 400颜色：白色；保证金-top : 20 rpx；font-size : 30 rpxopa city 33600.8 }/*下方协议开始*/.协议{ text-align :居中；}.协议-左{ color : # 333 font-size : 25 rpx；}.协议-右{ font-size : 23r pxcolor: # f9b400}/*下方协议结束*/4、js代码

页面({ //页面的初始数据data: { send: false，//是否已经发送验证码second: 120，//验证码有效时间phoneNum: ' '，//用户输入的电话号码代码： ' ',//用户输入的验证码}, //当输入手机号码后，把数据存到数据中inputPhoneNum:函数(e){ let phoneNum=e . detail。价值；这个。setdata({ phone num : phone num，}) }，//前台校验手机号checkphonenum:函数(phone num){ let str=/^(1[3|5|8]{1}\d{9})$/；if(str . test(PhoneNum)){ 0返回true} else { //提示手机号码格式不正确wx.showToast({ title: '手机号格式不正确，image: '/images/warn.png '，})返回false} }，//调用发送验证码接口发送Msg:函数(){ var phoneNum=this。数据。phoneNum如果(这个。checkphonenum(Phonenum)){ wx。请求({ URL : '写自己的后台请求发送验证码访问URL '，method: 'POST '，数据： { telphone : phoneNum，}，标头： { ' Content-Type ' : ' application/x-www-form-URL encoded ' }，success: (res)={ if(获取验证码成功) { //开始倒计时this.setData({ send: true，})这。timer()；} else { //提示获取验证码失败wx.showToast({ title: '获取验证码失败，image: '/images/warn.png '，}) }，}) }，//一个计时器定时器：函数(){ let Promise=新Promise((解析，拒绝)={ let setTimer=setInterval(()={ this。setdata({ second : this。数据。second-1 })if(this。数据。second=0){ this。setdata({ second : 60，send: false，}) resolve(setTimer) }，1000) }) promise。然后((setTimer)={ clearInterval(setTimer)})，当输完验证码，把数据存到数据中输入代码：函数{这个。setdata({代码： e . detail。value })}，//点击立即用伞按钮后，获取微信用户信息存到后台//(问题缺陷：用户更改个人信息后，后台拿到的还是旧数据，不过用户信息最重要的还是信息和用户填写的手机号，其他都不重要)onGotUserInfo:函数(e) { //TODO对数据包进行签名校验//前台校验数据如果(这个。数据。电话号码===' ' | |这个。数据。代码===' '){ wx。显示吐司({ title : '请填写手机号码和验证码，image: '/images/warn.png '，}) } //获取用户数据，(备注：我在用户一进入小程序就已经自动把信息获取到，然后放到缓存里)var userInfo={昵称： e.detail.userInfo。昵称，头像网址： e .详情。用户信息。头像网址，性别： e .详情。用户信息。性别电话号码。数据。电话号码，OpenID : wx。getstorageync(' OpenID ')}//获取验证码var代码=这个。数据。代码；//用户信息存到后台wx.request({ url: '写自己的后台请求注册URL '，method: 'POST '，数据： { telphone : userInfo。phonenum，代码：代码，昵称：用户信息。昵称，gender: userInfo.gender，openId: userInfo.openId，}，标头： { ' Content-Type ' : ' application/x-www-form-URL encoded ' }，success: (res)={ if(如果用户注册成功){ console.log('【用户注册成功】');wx。setstorage({ key : ' registered '，data : true })；wx.redirectTo({ url: './用户/用户？订单状态=0 ' })；} else { console.error('【用户注册失败】:' ' RES . data。result msg)；wx。显示吐司({ title : RES . data。resultmsg，image: '/images/warn.png '，})} })}，})总结

以上所述是小编给大家介绍的微信小程序的注册页面包含倒计时验证码、获取用户信息，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！