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


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 相关文章推荐
jquery中的mouseleave和mouseout的区别 模仿下拉框效果
Feb 07 Javascript
jQuery extend 的简单实例
Sep 18 Javascript
推荐10个2014年最佳的jQuery视频插件
Nov 12 Javascript
jQuery根据表单name获取值的方法
May 24 Javascript
JS去掉字符串前后空格或去掉所有空格的用法
Mar 25 Javascript
详解angularJs指令的3种绑定策略
Apr 13 Javascript
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
Jul 22 jQuery
node.js 利用流实现读写同步,边读边写的方法
Sep 11 Javascript
解决Layui选择全部,换页checkbox复选框重新勾选的问题方法
Aug 14 Javascript
小程序红包雨的实现示例
Feb 19 Javascript
JS实现计算小于非负数n的素数的数量算法示例
Feb 26 Javascript
基于redis的小程序登录实现方法流程分析
May 25 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+MYSQL的文章管理系统(二)
2006/10/09 PHP
关于php微信订阅号开发之token验证后自动发送消息给订阅号但是没有消息返回的问题
2015/12/21 PHP
PHP异常类及异常处理操作实例详解
2018/12/19 PHP
PHP框架实现WebSocket在线聊天通讯系统
2019/11/21 PHP
PHP设计模式(五)适配器模式Adapter实例详解【结构型】
2020/05/02 PHP
初窥JQuery(二) 事件机制(1)
2010/11/25 Javascript
javascript开发技术大全-第3章 js数据类型
2011/07/03 Javascript
jquery文字上下滚动的实现方法
2013/03/22 Javascript
动态添加删除表格行的js实现代码
2014/02/28 Javascript
网页下载文件期间如何防止用户对网页进行其他操作
2014/06/27 Javascript
js获取数组的最后一个元素
2015/04/14 Javascript
使用jsonp实现跨域获取数据实例讲解
2016/12/25 Javascript
JavaScript实现向select下拉框中添加和删除元素的方法
2017/03/07 Javascript
node中Express 动态设置端口的方法
2017/08/04 Javascript
微信小程序商品详情页规格属性选择示例代码
2017/10/30 Javascript
使用live-server快速搭建本地服务器+自动刷新的方法
2018/03/09 Javascript
微信小程序获取用户openid的实现
2018/12/24 Javascript
Python判断字符串是否为字母或者数字(浮点数)的多种方法
2018/08/03 Python
python登录WeChat 实现自动回复实例详解
2019/05/28 Python
python实现的生成word文档功能示例
2019/08/23 Python
Python求两个字符串最长公共子序列代码实例
2020/03/05 Python
Python如何省略括号方法详解
2020/03/21 Python
sklearn和keras的数据切分与交叉验证的实例详解
2020/06/19 Python
浅谈CSS3鼠标移入图片动态提示效果(transform)
2017/11/06 HTML / CSS
美国一家著名的儿童鞋制造商:Stride Rite
2017/01/02 全球购物
Manduka官网:瑜伽垫、瑜伽毛巾和服装
2018/07/02 全球购物
一些关于MySql加速和优化的面试题
2014/01/30 面试题
会计专业自我评价
2014/02/12 职场文书
后勤主管岗位职责
2014/03/01 职场文书
2014年纠风工作总结
2014/12/08 职场文书
2014年酒店年度工作总结
2014/12/10 职场文书
副总经理岗位职责
2015/02/02 职场文书
试用期自我评价范文
2015/03/10 职场文书
SqlServer 垂直分表(减少程序改动)
2021/04/16 SQL Server
详解Redis复制原理
2021/06/04 Redis
Rhit高效可视化Nginx日志查看工具
2021/11/01 Servers