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

这篇文章给大家分享的是有关微信小程序中注册页面包含倒计时验证码、获取用户信息的示例分析的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

创新互联建站坚持“要么做到，要么别承诺”的工作理念，服务领域包括：网站设计制作、成都网站设计、企业官网、英文网站、手机端网站、网站推广等服务，满足客户于互联网时代的花溪网站设计、移动媒体设计的需求，帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴！

1、页面展示

2、wxml代码

 
 
  
  获取验证码
  {{second+"s"}}
 
 
  
 
 立即用伞
 
 点击立即用伞即表示同意
 《共享雨伞租赁服务协议》
 

3、wxss代码

page{
 background: #f0eff4;
}
.topImage {
 width: 100%;
 height: auto;
}
.input-top, .input-buttom {
 font-size: 30rpx;
 padding-left: 30rpx;
 margin: 0rpx 20rpx;
 background-color: white;
 height: 70rpx;
}
.input-top {
 flex-direction: row;
 display: flex;
 justify-content: space-between;
 margin-bottom: 1px;
 margin-top: 20rpx;
}
#telphone, #captcha {
 height: 70rpx;
}
.sendMsg {
 line-height: 70rpx;
 margin-right: 30rpx;
 color: #f9b400;
}
.btn {
 margin: 0rpx 20rpx;
 background-color: #f9b400;
 color: white;
 margin-top: 20rpx;
 font-size: 30rpx;
 opacity:0.8
}
/* 下方协议开始 */
.protocol{
 text-align: center;
}
.protocol-left {
 color: #333;
 font-size: 25rpx;
}
.protocol-right {
 font-size: 23rpx;
 color: #f9b400;
}
/* 下方协议结束 */

4、js代码

Page({
 //页面的初始数据
 data: {
 send: false, //是否已经发送验证码
 second: 120, //验证码有效时间
 phoneNum: '', //用户输入的电话号码
 code: '', //用户输入的验证码
 },
 //当输入手机号码后，把数据存到data中
 inputPhoneNum: function(e) {
 let phoneNum = e.detail.value;
 this.setData({
  phoneNum: phoneNum,
 })
 },
 //前台校验手机号
 checkPhoneNum: function(phoneNum) {
 let str = /^(1[3|5|8]{1}\d{9})$/;
 if (str.test(phoneNum)) {
  return true;
 } else {
  //提示手机号码格式不正确
  wx.showToast({
  title: '手机号格式不正确',
  image: '/images/warn.png',
  })
  return false;
 }
 },
 //调用发送验证码接口
 sendMsg: function() {
 var phoneNum = this.data.phoneNum;
 if (this.checkPhoneNum(phoneNum)) {
  wx.request({
  url: '写自己的后台请求发送验证码访问URL',
  method: 'POST',
  data: {
   telphone: phoneNum,
  },
  header: {
   "Content-Type": "application/x-www-form-urlencoded"
  },
  success: (res) => {
   if (获取验证码成功) {
   //开始倒计时
   this.setData({
    send: true,
   })
   this.timer();
   } else {
   //提示获取验证码失败
   wx.showToast({
    title: '获取验证码失败',
    image: '/images/warn.png',
   })
   }
  },
  })
 }
 },
 //一个计时器
 timer: function() {
 let promise = new Promise((resolve, reject) => {
  let setTimer = setInterval(
  () => {
   this.setData({
   second: this.data.second - 1
   })
   if (this.data.second <= 0) {
   this.setData({
    second: 60,
    send: false,
   })
   resolve(setTimer)
   }
  }, 1000)
 })
 promise.then((setTimer) => {
  clearInterval(setTimer)
 })
 },
 //当输完验证码，把数据存到data中
 inputCode: function(e) {
 this.setData({
  code: e.detail.value
 })
 },
 //点击立即用伞按钮后，获取微信用户信息存到后台
 //（问题缺陷：用户更改个人信息后，后台拿到的还是旧数据，不过用户信息最重要的还是openid和用户填写的手机号，其他都不重要）
 onGotUserInfo: function(e) {
 // TODO 对数据包进行签名校验
 //前台校验数据
 if (this.data.phoneNum === '' || this.data.code===''){
  wx.showToast({
  title: "请填写手机号码和验证码",
  image: '/images/warn.png',
  })
 }
 //获取用户数据,(备注：我在用户一进入小程序就已经自动把openId获取到，然后放到缓存里)
 var userInfo = {
  nickName: e.detail.userInfo.nickName,
  avatarUrl: e.detail.userInfo.avatarUrl,
  gender: e.detail.userInfo.gender,
  phoneNum: this.data.phoneNum,
  openId: wx.getStorageSync('openid') 
 }
 //获取验证码
 var code = this.data.code;
 //用户信息存到后台
 wx.request({
  url: '写自己的后台请求注册URL',
  method: 'POST',
  data: {
  telphone: userInfo.phoneNum,
  code: code,
  nickName: userInfo.nickName,
  gender: userInfo.gender,
  openId: userInfo.openId, 
  },
  header: {
  "Content-Type": "application/x-www-form-urlencoded"
  },
  success: (res) => {
  if (如果用户注册成功) {
   console.log("【用户注册成功】");
   wx.setStorage({
   key: "registered",
   data: true
   });
   wx.redirectTo({
   url: '../user/user?orderState=0'
   });
  } else {
   console.error("【用户注册失败】：" + res.data.resultMsg);
   wx.showToast({
   title: res.data.resultMsg,
   image: '/images/warn.png',
   })
  }
  }
 })
 },
})

感谢各位的阅读！关于“微信小程序中注册页面包含倒计时验证码、获取用户信息的示例分析”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！