查看: 212|回复: 4

微信小程序 - 通用页面(登录、注册、找回密码)

[复制链接]
发表于 2019-8-29 21:11:18 | 显示全部楼层 |阅读模式
注册

效果图如下:

登录

登录


登录页面布局wxml代码:

  1. <view class="content">
  2.     <view class = "logo">
  3.         <image mode="aspectFit" src="/images/logo.png"></image>
  4.     </view>
  5.     <form bindsubmit="formSubmit">
  6.         <view class="input-area">
  7.           <input id="username" name="username" maxlength='40' type="text" placeholder="邮箱/手机号" />
  8.           <input id="password" name="password" maxlength='20' type="password" placeholder="密码" />
  9.         </view>
  10.         <view class="btn-area">
  11.             <button  disabled="{{disabled}}" style="background-color:{{loginBtnBgBgColor}}"   formType="submit"  loading="{{btnLoading}}">{{loginBtnTxt}} </button>
  12.             <view class="txt-area">
  13.                 <navigator redirect url="../findpassword/index"><text class="forgot-password">忘记密码?</text></navigator>
  14.                 <navigator redirect url="../regist/index"><text class="register">注册账号</text></navigator>
  15.             </view>
  16.         </view>
  17.     </form>

  18.     <!--<progress class="myprogress" percent="{{percent }}" color="{{color}}" active/>-->
  19.    
  20. </view>
复制代码

针对此页面中定义了4个动态属性,

  1. data:{
  2.     loginBtnTxt:”登录”,//登录按钮上的文字
  3.     loginBtnBgBgColor:”#ff9900″,//初始时背景颜色,点击后变为灰色
  4.     btnLoading:false,//控制登录按钮点击后是否显示loading效果
  5.     disabled:false//登录中,按钮不能点击
  6.   },
复制代码

主要代码片段:

  1. setLoginData1:function(){
  2.     this.setData({
  3.       loginBtnTxt:"登录中",
  4.       disabled: !this.data.disabled,
  5.       loginBtnBgBgColor:"#999",
  6.       btnLoading:!this.data.btnLoading
  7.     });
  8.   },
复制代码

点击登录时,动态设置data属性值,改变登录按钮文本,背景色,显示loading动画,不可点击

  1. setLoginData2:function(){
  2.     this.setData({
  3.       loginBtnTxt:"登录",
  4.       disabled: !this.data.disabled,
  5.       loginBtnBgBgColor:"#ff9900",
  6.       btnLoading:!this.data.btnLoading
  7.     });
  8.   },
复制代码

登录成功后,重置登录按钮效果

  1. checkUserName:function(param){
  2.     var email = util.regexConfig().email;
  3.     var phone = util.regexConfig().phone;
  4.     var inputUserName = param.username.trim();
  5.     if(email.test(inputUserName)||phone.test(inputUserName)){
  6.       return true;
  7.     }else{
  8.       wx.showModal({
  9.         title: '提示',
  10.         showCancel:false,
  11.         content: '请输入正确的邮箱或者手机号码'
  12.       });
  13.       return false;
  14.     }
  15.   },
  16.   checkPassword:function(param){
  17.     var userName = param.username.trim();
  18.     var password = param.password.trim();
  19.     if(password.length<=0){
  20.       wx.showModal({
  21.         title: '提示',
  22.         showCancel:false,
  23.         content: '请输入密码'
  24.       });
  25.       return false;
  26.     }else{
  27.       return true;
  28.     }
  29.   },
复制代码

校验用户输入格式对错;

  1. function regexConfig(){
  2.   var reg = {
  3.     email:/^(\w-*\.*)[email protected](\w-?)+(\.\w{2,})+$/,
  4.     phone:/^1(3|4|5|7|8)\d{9}$/
  5.   }
  6.   return reg;
  7. }
复制代码

验证邮箱手机号码的正则表达式

  1. checkUserInfo:function(param){
  2.     var username = param.username.trim();
  3.     var password = param.password.trim();
  4.     var that = this;
  5.     if((username=='[email protected]'||username=='18500334462')&&password=='000000'){
  6.         setTimeout(function(){
  7.           wx.showToast({
  8.             title: '成功',
  9.             icon: 'success',
  10.             duration: 1500
  11.           });
  12.           that.setLoginData2();
  13.           that.redirectTo(param);
  14.         },2000);
  15.     }else{
  16.       wx.showModal({
  17.         title: '提示',
  18.         showCancel:false,
  19.         content: '用户名或密码有误,请重新输入'
  20.       });
  21.       this.setLoginData2();
  22.     }
  23.   },
复制代码

用户输入格式无误,校验用户输入的信息是否正确,这里只是把用户名写死在代码中,做个演示,正式开发需要调取后台登录接口,使用wx.request方式获取接口数据

  1. redirectTo:function(param){
  2.     //需要将param转换为字符串
  3.     param = JSON.stringify(param);
  4.     wx.redirectTo({
  5.       url: '../main/index?param='+ param//参数只能是字符串形式,不能为json对象
  6.     })
  7.   }
复制代码

最后提交数据到下一个页面,这里如果提交到下一个页面的参数比较多,可以发送一个json格式的字符串,但首先一定要将param转义为string类型;

下一个页面获取参数的方式如下:

  1. onLoad:function(option){
  2.     // 页面初始化 options为页面跳转所带来的参数
  3.     var param = JSON.parse(option.param);
  4.     this.setData({
  5.       username:param.username
  6.     });
  7.    
  8.   },
复制代码



注册

页面效果:


zc.png


页面布局代码:


  1. <font size="2"><view class="content">
  2.     <view class = "logo">
  3.         <image mode="aspectFit" src="/images/logo.png"></image>
  4.     </view>
  5.     <form bindsubmit="formSubmit">
  6.         <view class="input-area">
  7.           <input id="username" name="username" maxlength='11' type="text" placeholder="手机号" bindchange="getPhoneNum"/>
  8.           <view class="smsCode">
  9.             <input id="smsCode" name="smsCode" maxlength='6' type="text" placeholder="验证码" />
  10.             <button bindtap = "getSmsCode" disabled="{{smsCodeDisabled}}" style="background-color:{{getSmsCodeBtnColor}}"   class="getSmsCodeBtn">{{getSmsCodeBtnTxt}}</button>
  11.           </view>
  12.           <input id="password" name="password" maxlength='20' type="password" placeholder="密码" />
  13.         </view>
  14.         <view class="btn-area">
  15.             <button  disabled="{{registDisabled}}" style="background-color:{{registBtnBgBgColor}}"   formType="submit"  loading="{{btnLoading}}"> {{registBtnTxt}} </button>
  16.             <view class="txt-area">
  17.                  <navigator redirect url="../findpassword/index"><text class="forgot-password">忘记密码?</text></navigator>
  18.                  <navigator redirect url="../login/index"><text class="register">登录账号</text></navigator>
  19.             </view>
  20.         </view>
  21.     </form>

  22.     <!--<progress class="myprogress" percent="{{percent }}" color="{{color}}" active/>-->
  23.    
  24. </view></font>
复制代码


主要代码片段:


  1. <font size="2">setregistData1:function(){
  2.     this.setData({
  3.       registBtnTxt:"注册中",
  4.       registDisabled: !this.data.registDisabled,
  5.       registBtnBgBgColor:"#999",
  6.       btnLoading:!this.data.btnLoading
  7.     });
  8.   },</font>
复制代码


点击注册时,动态设置data属性值,改变注册按钮文本,背景色,显示loading动画,设置不可点击


  1. <font size="2">setregistData2:function(){
  2.     this.setData({
  3.       registBtnTxt:"注册",
  4.       registDisabled: !this.data.registDisabled,
  5.       registBtnBgBgColor:"#ff9900",
  6.       btnLoading:!this.data.btnLoading
  7.     });
  8.   },</font>
复制代码


注册成功后,重置注册按钮效果


  1. <font size="2">checkUserName:function(param){
  2.     var phone = util.regexConfig().phone;
  3.     var inputUserName = param.trim();
  4.     if(phone.test(inputUserName)){
  5.       return true;
  6.     }else{
  7.       wx.showModal({
  8.         title: '提示',
  9.         showCancel:false,
  10.         content: '请输入正确的手机号码'
  11.       });
  12.       return false;
  13.     }
  14.   },
  15.   checkPassword:function(param){
  16.     var userName = param.username.trim();
  17.     var password = param.password.trim();
  18.     if(password.length<=0){
  19.       wx.showModal({
  20.         title: '提示',
  21.         showCancel:false,
  22.         content: '请设置密码'
  23.       });
  24.       return false;
  25.     }else if(password.length<6||password.length>20){
  26.       wx.showModal({
  27.         title: '提示',
  28.         showCancel:false,
  29.         content: '密码长度为6-20位字符'
  30.       });
  31.       return false;
  32.     }else{
  33.       return true;
  34.     }
  35.   },</font>
复制代码


检验输入的手机号码及密码格式是否正确


  1. <font size="2">getSmsCode:function(){
  2.     var phoneNum = this.data.phoneNum;
  3.     var that = this;
  4.     var count = 60;
  5.     if(this.checkUserName(phoneNum)){
  6.       var si = setInterval(function(){
  7.       if(count > 0){
  8.         count--;
  9.         that.setData({
  10.           getSmsCodeBtnTxt:count+' s',
  11.           getSmsCodeBtnColor:"#999",
  12.           smsCodeDisabled: true
  13.         });
  14.       }else{
  15.         that.setData({
  16.           getSmsCodeBtnTxt:"获取验证码",
  17.           getSmsCodeBtnColor:"#ff9900",
  18.           smsCodeDisabled: false
  19.         });
  20.           count = 60;
  21.           clearInterval(si);
  22.         }
  23.       },1000);
  24.     }
  25.    
  26.   },</font>
复制代码


倒计时获取手机短信验证码效果,注意在setInterval()中要重新定义this指向,使用var that = this,代替指向当前页面的page对象;


  1. <font size="2">checkSmsCode:function(param){
  2.     var smsCode = param.smsCode.trim();
  3.     var tempSmsCode = '000000';//演示效果临时变量,正式开发需要通过wx.request获取
  4.     if(smsCode!=tempSmsCode){
  5.       wx.showModal({
  6.         title: '提示',
  7.         showCancel:false,
  8.         content: '请输入正确的短信验证码'
  9.       });
  10.       return false;
  11.     }else{
  12.       return true;
  13.     }
  14.   },</font>
复制代码


校验手机短信验证码是否正确,这里正式开发同样需要调取后台验证接口,这里只是写死在代码中作为效果演示;


  1. <font size="2">getPhoneNum:function(e){
  2.    var value  = e.detail.value;
  3.    this.setData({
  4.     phoneNum: value     
  5.    });
  6.   },</font>
复制代码
  1. <font size="2"><input id="username" name="username" maxlength='11' type="text" placeholder="手机号" bindchange="getPhoneNum"/></font>
复制代码


细节:因为小程序不能操作dom元素,所以是无法在点击获取验证码按钮后通过document.getElementById(username).value获取手机号码;所以这里需要对手机号码加一个绑定事件bindchange,当输入框内容发生改变时将用户输入内容存放到全局data–>phoneNum里面;

  1. <font size="2">formSubmit:function(e){
  2.     var param = e.detail.value;
  3.     this.mysubmit(param);
  4. },
  5. mysubmit:function (param){
  6.     var flag = this.checkUserName(param.username)&&this.checkPassword(param)&&this.checkSmsCode(param)
  7.     var that = this;
  8.     if(flag){
  9.         this.setregistData1();
  10.         setTimeout(function(){
  11.           wx.showToast({
  12.             title: '成功',
  13.             icon: 'success',
  14.             duration: 1500
  15.           });
  16.           that.setregistData2();
  17.           that.redirectTo(param);
  18.         },2000);
  19.     }
  20.   },</font>
复制代码



最后就是将用户的输入内容提交





找回密码

页面效果:


zhmm.png

zhmm1.png


找回密码原型基本和注册页面差不多,所以直接贴上所有代码:


  1. var util = require("../../utils/util.js");

  2. Page({
  3.   data:{
  4.     registBtnTxt:"提交",
  5.     registBtnBgBgColor:"#ff9900",
  6.     getSmsCodeBtnTxt:"获取验证码",
  7.     getSmsCodeBtnColor:"#ff9900",
  8.     // getSmsCodeBtnTime:60,
  9.     btnLoading:false,
  10.     registDisabled:false,
  11.     smsCodeDisabled:false,
  12.     phoneNum: '',
  13.    
  14.   },
  15.   onLoad:function(options){
  16.     // 页面初始化 options为页面跳转所带来的参数
  17.    
  18.   },
  19.   onReady:function(){
  20.     // 页面渲染完成
  21.    
  22.   },
  23.   onShow:function(){
  24.     // 页面显示
  25.    
  26.   },
  27.   onHide:function(){
  28.     // 页面隐藏
  29.    
  30.   },
  31.   onUnload:function(){
  32.     // 页面关闭
  33.    
  34.   },
  35.   getPhoneNum:function(e){
  36.    var value  = e.detail.value;
  37.    this.setData({
  38.     phoneNum: value     
  39.    });
  40.   },
  41.   formSubmit:function(e){
  42.     var param = e.detail.value;
  43.     this.mysubmit(param);
  44.   },
  45.   mysubmit:function (param){
  46.     var num = param.username.trim();
  47.     var flag = this.checkUserName(num)&&this.checkPhoneIsRegist(param.username)&&this.checkPassword(param)&&this.checkSmsCode(param)
  48.     var that = this;
  49.     if(flag){
  50.         this.setregistData1();
  51.         setTimeout(function(){
  52.           wx.showToast({
  53.             title: '成功',
  54.             icon: 'success',
  55.             duration: 1500
  56.           });
  57.           that.setregistData2();
  58.           that.redirectTo(param);
  59.         },2000);
  60.     }
  61.   },
  62.   setregistData1:function(){
  63.     this.setData({
  64.       registBtnTxt:"提交中",
  65.       registDisabled: !this.data.registDisabled,
  66.       registBtnBgBgColor:"#999",
  67.       btnLoading:!this.data.btnLoading
  68.     });
  69.   },
  70.   setregistData2:function(){
  71.     this.setData({
  72.       registBtnTxt:"提交",
  73.       registDisabled: !this.data.registDisabled,
  74.       registBtnBgBgColor:"#ff9900",
  75.       btnLoading:!this.data.btnLoading
  76.     });
  77.   },
  78.   checkUserName:function(num){
  79.     var phone = util.regexConfig().phone;
  80.     // var inputUserName = param.username.trim();
  81.     if(phone.test(num)){
  82.       return true;
  83.     }else{
  84.       wx.showModal({
  85.         title: '提示',
  86.         showCancel:false,
  87.         content: '请输入正确的手机号码'
  88.       });
  89.       return false;
  90.     }
  91.   },
  92.   checkPhoneIsRegist:function(phoneNum){
  93.       var tempPhoneNum = "13211112222";//测试未注册手机号码
  94.       if(phoneNum==tempPhoneNum){
  95.           wx.showModal({
  96.           title: '提示',
  97.           showCancel:false,
  98.           content: '该手机尚未注册!'
  99.         });
  100.         return false;
  101.       }else{
  102.         return true;
  103.       }
  104.   },
  105.   checkPassword:function(param){
  106.     var userName = param.username.trim();
  107.     var password = param.password.trim();
  108.     if(password.length<=0){
  109.       wx.showModal({
  110.         title: '提示',
  111.         showCancel:false,
  112.         content: '请设置新密码'
  113.       });
  114.       return false;
  115.     }else if(password.length<6||password.length>20){
  116.       wx.showModal({
  117.         title: '提示',
  118.         showCancel:false,
  119.         content: '密码长度为6-20位字符'
  120.       });
  121.       return false;
  122.     }else{
  123.       return true;
  124.     }
  125.   },
  126.   getSmsCode:function(){
  127.     var phoneNum = this.data.phoneNum;
  128.     var that = this;
  129.     var count = 60;
  130.     if(this.checkUserName(phoneNum)&&this.checkPhoneIsRegist(phoneNum)){
  131.       var si = setInterval(function(){
  132.         if(count > 0){
  133.           count--;
  134.           that.setData({
  135.             getSmsCodeBtnTxt:count+' s',
  136.             getSmsCodeBtnColor:"#999",
  137.             smsCodeDisabled: true
  138.           });
  139.         }else{
  140.           that.setData({
  141.             getSmsCodeBtnTxt:"获取验证码",
  142.             getSmsCodeBtnColor:"#ff9900",
  143.             smsCodeDisabled: false
  144.           });
  145.           count = 60;
  146.           clearInterval(si);
  147.         }
  148.       },1000);
  149.     }
  150.   },
  151.   checkSmsCode:function(param){
  152.     var smsCode = param.smsCode.trim();
  153.     var tempSmsCode = '000000';//演示效果临时变量,正式开发需要通过wx.request获取
  154.     if(smsCode!=tempSmsCode){
  155.       wx.showModal({
  156.         title: '提示',
  157.         showCancel:false,
  158.         content: '请输入正确的短信验证码'
  159.       });
  160.       return false;
  161.     }else{
  162.       return true;
  163.     }
  164.   },
  165.   redirectTo:function(param){
  166.     //需要将param转换为字符串
  167.     param = JSON.stringify(param);
  168.     wx.redirectTo({
  169.       url: '../main/index?param='+ param//参数只能是字符串形式,不能为json对象
  170.     })
  171.   }

  172. })
复制代码


细节:找回密码多了一个处理流程,需要检验当前手机号码是否注册过;


  1. checkPhoneIsRegist:function(phoneNum){
  2.       var tempPhoneNum = "13211112222";//测试未注册手机号码
  3.       if(phoneNum==tempPhoneNum){
  4.           wx.showModal({
  5.           title: '提示',
  6.           showCancel:false,
  7.           content: '该手机尚未注册!'
  8.         });
  9.         return false;
  10.       }else{
  11.         return true;
  12.       }
  13.   },
复制代码

代码下载

游客,如果您要下载源码或者查看隐藏内容请回复

回复

使用道具 举报

发表于 2019-9-3 15:11:06 | 显示全部楼层
666666666666666666666666666666
回复 支持 反对

使用道具 举报

发表于 2019-9-8 03:30:35 手机频道 | 显示全部楼层
我想下载这个登录注册的源码可以吗
回复 支持 反对

使用道具 举报

发表于 前天 08:27 手机频道 | 显示全部楼层
感谢分享,受教了,谢谢大佬
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

关闭

网站推荐上一条 /1 下一条



邮箱:[email protected] QQ:791577401 木子牛HTML5工作室 版权所有

© MUZINIU Inc.小黑屋|手机版|Archiver|HANGNIU  

Powered by MuZiNiuX3.2( 豫ICP备12017936号 )

 豫公网安备 41078102000103号

快速回复 返回顶部 返回列表