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


Posted in Javascript onMay 22, 2019

1、页面展示

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

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="请输入手机号" bindinput="inputPhoneNum"/>
  <text wx:if="{{!send}}" bindtap='sendMsg' class="sendMsg">获取验证码</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="请输入4位验证码" bindinput="inputCode"/>
 </view>
 <button class="btn" open-type="getUserInfo" bindgetuserinfo="onGotUserInfo" lang="zh_CN">立即用伞</button>
 <view class='protocol'>
 <text class="protocol-left">点击立即用伞即表示同意</text>
 <text class="protocol-right">《共享雨伞租赁服务协议》</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
}
/* 下方协议开始 */
.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',
   })
  }
  }
 })
 },
})

总结

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

Javascript 相关文章推荐
表单验证的完整应用案例探讨
Mar 29 Javascript
基于Bootstrap的后台管理面板 Bootstrap Metro Dashboard
Jun 17 Javascript
AngularJs  Understanding Angular Templates
Sep 02 Javascript
jQuery实现的checkbox级联选择下拉菜单效果示例
Dec 26 Javascript
原生js获取浏览器窗口及元素宽高常用方法集合
Jan 18 Javascript
Javascript中类式继承和原型式继承的实现方法和区别之处
Apr 25 Javascript
移动端网页开发调试神器Eruda的介绍与使用技巧
Oct 30 Javascript
微信小程序实现下拉刷新和轮播图效果
Nov 21 Javascript
vue 解决addRoutes动态添加路由后刷新失效问题
Jul 02 Javascript
JSON基本语法及与JavaScript的异同实例分析
Jan 04 Javascript
VUE实现移动端列表筛选功能
Aug 23 Javascript
vue使用video插件vue-video-player详解
Oct 23 Javascript
JavaScript函数式编程(Functional Programming)纯函数用法分析
May 22 #Javascript
jQuery Migrate 插件用法实例详解
May 22 #jQuery
自定义Vue组件打包、发布到npm及使用教程
May 22 #Javascript
Vue中的组件及路由使用实例代码详解
May 22 #Javascript
Vue侦测相关api的实现方法
May 22 #Javascript
一文快速详解前端框架 Vue 最强大的功能
May 21 #Javascript
微信小程序系列之自定义顶部导航功能
May 21 #Javascript
You might like
解析PHP计算页面执行时间的实现代码
2013/06/18 PHP
php json_encode值中大括号与花括号区别
2013/09/30 PHP
PHP环境搭建(php+Apache+mysql)
2016/11/14 PHP
php+Ajax处理xml与json格式数据的方法示例
2019/03/04 PHP
jquery last-child 列表最后一项的样式
2010/01/22 Javascript
关于JS中setTimeout()无法调用带参函数问题的解决方法
2016/06/21 Javascript
老生常谈js动态添加事件--- 事件委托
2016/07/19 Javascript
jquery插件treegrid树状表格的使用方法详解(.Net平台)
2017/01/03 Javascript
Jil,高效的json序列化和反序列化库
2017/02/15 Javascript
详解Angular模板引用变量及其作用域
2018/11/23 Javascript
JavaScript函数的特性与应用实践深入详解
2018/12/30 Javascript
vue指令v-html使用过滤器filters功能实例
2019/10/25 Javascript
在vue中阻止浏览器后退的实例
2019/11/06 Javascript
微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案
2020/01/02 Javascript
node创建Vue项目步骤详解
2020/03/06 Javascript
[01:06:43]完美世界DOTA2联赛PWL S3 PXG vs GXR 第二场 12.19
2020/12/24 DOTA
python 获取et和excel的版本号
2009/04/09 Python
人工智能最火编程语言 Python大战Java!
2017/11/13 Python
解决pycharm每次新建项目都要重新安装一些第三方库的问题
2019/01/17 Python
对Python3使运行暂停的方法详解
2019/02/18 Python
Python分支语句与循环语句应用实例分析
2019/05/07 Python
浅析Python与Mongodb数据库之间的操作方法
2019/07/01 Python
softmax及python实现过程解析
2019/09/30 Python
pytorch绘制并显示loss曲线和acc曲线,LeNet5识别图像准确率
2020/01/02 Python
Python多进程multiprocessing、进程池用法实例分析
2020/03/24 Python
基于Python pyecharts实现多种图例代码解析
2020/08/10 Python
容易被忽略的Python内置类型
2020/09/03 Python
Python爬虫模拟登陆哔哩哔哩(bilibili)并突破点选验证码功能
2020/12/21 Python
哄娃神器4moms商店:美国婴童用品品牌
2019/03/07 全球购物
顶岗实习计划书
2014/01/10 职场文书
校运会入场式解说词
2014/02/10 职场文书
《绿色蝈蝈》教学反思
2014/03/02 职场文书
2014年社会实践活动总结范文
2014/04/29 职场文书
寒山寺导游词
2015/02/03 职场文书
幼儿园校车安全责任书
2015/05/08 职场文书
2015中秋节晚会开场白
2015/07/30 职场文书