微信小程序中注冊(cè)頁(yè)面包含倒計(jì)時(shí)驗(yàn)證碼、獲取用戶信息的示例分析

這篇文章給大家分享的是有關(guān)微信小程序中注冊(cè)頁(yè)面包含倒計(jì)時(shí)驗(yàn)證碼、獲取用戶信息的示例分析的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

1、頁(yè)面展示

2、wxml代碼

<!--pages/register/register.wxml-->
<scroll-view>
 <image src='/images/register.png' mode='widthFix' class="topImage"></image>
 <view class='input-top'>
  <input id="telphone" maxlength='11' type="text" placeholder="請(qǐng)輸入手機(jī)號(hào)" bindinput="inputPhoneNum"/>
  <text wx:if="{{!send}}" bindtap='sendMsg' class="sendMsg">獲取驗(yàn)證碼</text>
  <text wx:if="{{send}}" class="sendMsg" bindtap="sendMsg">{{second+"s"}}</text>
 </view>
 <view class="input-buttom">
  <input id="captcha" type="number" maxlength="4" placeholder="請(qǐng)輸入4位驗(yàn)證碼" bindinput="inputCode"/>
 </view>
 <button class="btn" open-type="getUserInfo" bindgetuserinfo="onGotUserInfo" lang="zh_CN">立即用傘</button>
 <view class='protocol'>
 <text class="protocol-left">點(diǎn)擊立即用傘即表示同意</text>
 <text class="protocol-right">《共享雨傘租賃服務(wù)協(xié)議》</text>
 </view>
</scroll-view>

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
}
/* 下方協(xié)議開(kāi)始 */
.protocol{
 text-align: center;
}
.protocol-left {
 color: #333;
 font-size: 25rpx;
}
.protocol-right {
 font-size: 23rpx;
 color: #f9b400;
}
/* 下方協(xié)議結(jié)束 */

4、js代碼

Page({
 //頁(yè)面的初始數(shù)據(jù)
 data: {
 send: false, //是否已經(jīng)發(fā)送驗(yàn)證碼
 second: 120, //驗(yàn)證碼有效時(shí)間
 phoneNum: '', //用戶輸入的電話號(hào)碼
 code: '', //用戶輸入的驗(yàn)證碼
 },
 //當(dāng)輸入手機(jī)號(hào)碼后，把數(shù)據(jù)存到data中
 inputPhoneNum: function(e) {
 let phoneNum = e.detail.value;
 this.setData({
  phoneNum: phoneNum,
 })
 },
 //前臺(tái)校驗(yàn)手機(jī)號(hào)
 checkPhoneNum: function(phoneNum) {
 let str = /^(1[3|5|8]{1}\d{9})$/;
 if (str.test(phoneNum)) {
  return true;
 } else {
  //提示手機(jī)號(hào)碼格式不正確
  wx.showToast({
  title: '手機(jī)號(hào)格式不正確',
  image: '/images/warn.png',
  })
  return false;
 }
 },
 //調(diào)用發(fā)送驗(yàn)證碼接口
 sendMsg: function() {
 var phoneNum = this.data.phoneNum;
 if (this.checkPhoneNum(phoneNum)) {
  wx.request({
  url: '寫(xiě)自己的后臺(tái)請(qǐng)求發(fā)送驗(yàn)證碼訪問(wèn)URL',
  method: 'POST',
  data: {
   telphone: phoneNum,
  },
  header: {
   "Content-Type": "application/x-www-form-urlencoded"
  },
  success: (res) => {
   if (獲取驗(yàn)證碼成功) {
   //開(kāi)始倒計(jì)時(shí)
   this.setData({
    send: true,
   })
   this.timer();
   } else {
   //提示獲取驗(yàn)證碼失敗
   wx.showToast({
    title: '獲取驗(yàn)證碼失敗',
    image: '/images/warn.png',
   })
   }
  },
  })
 }
 },
 //一個(gè)計(jì)時(shí)器
 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)
 })
 },
 //當(dāng)輸完驗(yàn)證碼，把數(shù)據(jù)存到data中
 inputCode: function(e) {
 this.setData({
  code: e.detail.value
 })
 },
 //點(diǎn)擊立即用傘按鈕后，獲取微信用戶信息存到后臺(tái)
 //（問(wèn)題缺陷：用戶更改個(gè)人信息后，后臺(tái)拿到的還是舊數(shù)據(jù)，不過(guò)用戶信息最重要的還是openid和用戶填寫(xiě)的手機(jī)號(hào)，其他都不重要）
 onGotUserInfo: function(e) {
 // TODO 對(duì)數(shù)據(jù)包進(jìn)行簽名校驗(yàn)
 //前臺(tái)校驗(yàn)數(shù)據(jù)
 if (this.data.phoneNum === '' || this.data.code===''){
  wx.showToast({
  title: "請(qǐng)?zhí)顚?xiě)手機(jī)號(hào)碼和驗(yàn)證碼",
  image: '/images/warn.png',
  })
 }
 //獲取用戶數(shù)據(jù),(備注：我在用戶一進(jìn)入小程序就已經(jīng)自動(dòng)把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') 
 }
 //獲取驗(yàn)證碼
 var code = this.data.code;
 //用戶信息存到后臺(tái)
 wx.request({
  url: '寫(xiě)自己的后臺(tái)請(qǐng)求注冊(cè)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 (如果用戶注冊(cè)成功) {
   console.log("【用戶注冊(cè)成功】");
   wx.setStorage({
   key: "registered",
   data: true
   });
   wx.redirectTo({
   url: '../user/user?orderState=0'
   });
  } else {
   console.error("【用戶注冊(cè)失敗】：" + res.data.resultMsg);
   wx.showToast({
   title: res.data.resultMsg,
   image: '/images/warn.png',
   })
  }
  }
 })
 },
})

感謝各位的閱讀！關(guān)于“微信小程序中注冊(cè)頁(yè)面包含倒計(jì)時(shí)驗(yàn)證碼、獲取用戶信息的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！