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

用户5997198

发布于 2019-09-02 18:05:02

19.8K1

效果图如下：

登录页面布局wxml代码：

<view class="content">
    <view class = "logo">
        <image mode="aspectFit" src="/images/logo.png"></image>
    </view>
    <form bindsubmit="formSubmit">
        <view class="input-area">
          <input id="username" name="username" maxlength='40' type="text" placeholder="邮箱/手机号" />
          <input id="password" name="password" maxlength='20' type="password" placeholder="密码" />
        </view>
        <view class="btn-area">
            <button  disabled="{{disabled}}" style="background-color:{{loginBtnBgBgColor}}"   formType="submit"  loading="{{btnLoading}}">{{loginBtnTxt}} </button>
            <view class="txt-area">
                <navigator redirect url="../findpassword/index"><text class="forgot-password">忘记密码？</text></navigator>
                <navigator redirect url="../regist/index"><text class="register">注册账号</text></navigator> 
            </view>
        </view>
    </form>

    <!--<progress class="myprogress" percent="{{percent }}" color="{{color}}" active/>-->
    
</view>

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

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

主要代码片段：

setLoginData1:function(){
    this.setData({
      loginBtnTxt:"登录中",
      disabled: !this.data.disabled,
      loginBtnBgBgColor:"#999",
      btnLoading:!this.data.btnLoading
    });
  },

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

setLoginData2:function(){
    this.setData({
      loginBtnTxt:"登录",
      disabled: !this.data.disabled,
      loginBtnBgBgColor:"#ff9900",
      btnLoading:!this.data.btnLoading
    });
  },

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

checkUserName:function(param){
    var email = util.regexConfig().email; 
    var phone = util.regexConfig().phone;
    var inputUserName = param.username.trim();
    if(email.test(inputUserName)||phone.test(inputUserName)){
      return true;
    }else{
      wx.showModal({
        title: '提示',
        showCancel:false,
        content: '请输入正确的邮箱或者手机号码'
      });
      return false;
    }
  },
  checkPassword:function(param){
    var userName = param.username.trim();
    var password = param.password.trim();
    if(password.length<=0){
      wx.showModal({
        title: '提示',
        showCancel:false,
        content: '请输入密码'
      });
      return false;
    }else{
      return true;
    }
  },

校验用户输入格式对错；

function regexConfig(){
  var reg = {
    email:/^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/,
    phone:/^1(3|4|5|7|8)\d{9}$/
  }
  return reg;
}

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

checkUserInfo:function(param){
    var username = param.username.trim();
    var password = param.password.trim();
    var that = this;
    if((username=='admin@163.com'||username=='18500334462')&&password=='000000'){
        setTimeout(function(){
          wx.showToast({
            title: '成功',
            icon: 'success',
            duration: 1500
          });
          that.setLoginData2();
          that.redirectTo(param);
        },2000);
    }else{
      wx.showModal({
        title: '提示',
        showCancel:false,
        content: '用户名或密码有误，请重新输入'
      });
      this.setLoginData2();
    }
  },

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

redirectTo:function(param){
    //需要将param转换为字符串
    param = JSON.stringify(param);
    wx.redirectTo({
      url: '../main/index?param='+ param//参数只能是字符串形式，不能为json对象
    })
  }

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

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

onLoad:function(option){
    // 页面初始化 options为页面跳转所带来的参数
    var param = JSON.parse(option.param); 
    this.setData({
      username:param.username
    });
    
  },

页面效果：

页面布局代码：

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

    <!--<progress class="myprogress" percent="{{percent }}" color="{{color}}" active/>-->
    
</view></font>

主要代码片段：

<font size="2">setregistData1:function(){
    this.setData({
      registBtnTxt:"注册中",
      registDisabled: !this.data.registDisabled,
      registBtnBgBgColor:"#999",
      btnLoading:!this.data.btnLoading
    });
  },</font>

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

<font size="2">setregistData2:function(){
    this.setData({
      registBtnTxt:"注册",
      registDisabled: !this.data.registDisabled,
      registBtnBgBgColor:"#ff9900",
      btnLoading:!this.data.btnLoading
    });
  },</font>

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

<font size="2">checkUserName:function(param){ 
    var phone = util.regexConfig().phone;
    var inputUserName = param.trim();
    if(phone.test(inputUserName)){
      return true;
    }else{
      wx.showModal({
        title: '提示',
        showCancel:false,
        content: '请输入正确的手机号码'
      });
      return false;
    }
  },
  checkPassword:function(param){
    var userName = param.username.trim();
    var password = param.password.trim();
    if(password.length<=0){
      wx.showModal({
        title: '提示',
        showCancel:false,
        content: '请设置密码'
      });
      return false;
    }else if(password.length<6||password.length>20){
      wx.showModal({
        title: '提示',
        showCancel:false,
        content: '密码长度为6-20位字符'
      });
      return false;
    }else{
      return true;
    }
  },</font>

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

<font size="2">getSmsCode:function(){
    var phoneNum = this.data.phoneNum;
    var that = this;
    var count = 60;
    if(this.checkUserName(phoneNum)){
      var si = setInterval(function(){
      if(count > 0){
        count--;
        that.setData({
          getSmsCodeBtnTxt:count+' s',
          getSmsCodeBtnColor:"#999",
          smsCodeDisabled: true
        });
      }else{
        that.setData({
          getSmsCodeBtnTxt:"获取验证码",
          getSmsCodeBtnColor:"#ff9900",
          smsCodeDisabled: false
        });
          count = 60;
          clearInterval(si);
        }
      },1000);
    }
    
  },</font>

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

<font size="2">checkSmsCode:function(param){
    var smsCode = param.smsCode.trim();
    var tempSmsCode = '000000';//演示效果临时变量，正式开发需要通过wx.request获取
    if(smsCode!=tempSmsCode){
      wx.showModal({
        title: '提示',
        showCancel:false,
        content: '请输入正确的短信验证码'
      });
      return false;
    }else{
      return true;
    }
  },</font>

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

<font size="2">getPhoneNum:function(e){
   var value  = e.detail.value;
   this.setData({
    phoneNum: value     
   });
  },</font>

<font size="2"><input id="username" name="username" maxlength='11' type="text" placeholder="手机号" bindchange="getPhoneNum"/></font>

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

<font size="2">formSubmit:function(e){
    var param = e.detail.value;
    this.mysubmit(param);
},
mysubmit:function (param){
    var flag = this.checkUserName(param.username)&&this.checkPassword(param)&&this.checkSmsCode(param)
    var that = this;
    if(flag){
        this.setregistData1();
        setTimeout(function(){
          wx.showToast({
            title: '成功',
            icon: 'success',
            duration: 1500
          });
          that.setregistData2();
          that.redirectTo(param);
        },2000);
    } 
  },</font>

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

找回密码

页面效果：

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

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

Page({
  data:{
    registBtnTxt:"提交",
    registBtnBgBgColor:"#ff9900",
    getSmsCodeBtnTxt:"获取验证码",
    getSmsCodeBtnColor:"#ff9900",
    // getSmsCodeBtnTime:60,
    btnLoading:false,
    registDisabled:false,
    smsCodeDisabled:false,
    phoneNum: '',
    
  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
    
  },
  onReady:function(){
    // 页面渲染完成
    
  },
  onShow:function(){
    // 页面显示
    
  },
  onHide:function(){
    // 页面隐藏
    
  },
  onUnload:function(){
    // 页面关闭
    
  },
  getPhoneNum:function(e){
   var value  = e.detail.value;
   this.setData({
    phoneNum: value     
   });
  },
  formSubmit:function(e){
    var param = e.detail.value;
    this.mysubmit(param);
  },
  mysubmit:function (param){
    var num = param.username.trim();
    var flag = this.checkUserName(num)&&this.checkPhoneIsRegist(param.username)&&this.checkPassword(param)&&this.checkSmsCode(param)
    var that = this;
    if(flag){
        this.setregistData1();
        setTimeout(function(){
          wx.showToast({
            title: '成功',
            icon: 'success',
            duration: 1500
          });
          that.setregistData2();
          that.redirectTo(param);
        },2000);
    } 
  },
  setregistData1:function(){
    this.setData({
      registBtnTxt:"提交中",
      registDisabled: !this.data.registDisabled,
      registBtnBgBgColor:"#999",
      btnLoading:!this.data.btnLoading
    });
  },
  setregistData2:function(){
    this.setData({
      registBtnTxt:"提交",
      registDisabled: !this.data.registDisabled,
      registBtnBgBgColor:"#ff9900",
      btnLoading:!this.data.btnLoading
    });
  },
  checkUserName:function(num){ 
    var phone = util.regexConfig().phone;
    // var inputUserName = param.username.trim();
    if(phone.test(num)){
      return true;
    }else{
      wx.showModal({
        title: '提示',
        showCancel:false,
        content: '请输入正确的手机号码'
      });
      return false;
    }
  },
  checkPhoneIsRegist:function(phoneNum){
      var tempPhoneNum = "13211112222";//测试未注册手机号码
      if(phoneNum==tempPhoneNum){
          wx.showModal({
          title: '提示',
          showCancel:false,
          content: '该手机尚未注册！'
        });
        return false;
      }else{
        return true;
      }
  },
  checkPassword:function(param){
    var userName = param.username.trim();
    var password = param.password.trim();
    if(password.length<=0){
      wx.showModal({
        title: '提示',
        showCancel:false,
        content: '请设置新密码'
      });
      return false;
    }else if(password.length<6||password.length>20){
      wx.showModal({
        title: '提示',
        showCancel:false,
        content: '密码长度为6-20位字符'
      });
      return false;
    }else{
      return true;
    }
  },
  getSmsCode:function(){
    var phoneNum = this.data.phoneNum;
    var that = this;
    var count = 60;
    if(this.checkUserName(phoneNum)&&this.checkPhoneIsRegist(phoneNum)){
      var si = setInterval(function(){
        if(count > 0){
          count--;
          that.setData({
            getSmsCodeBtnTxt:count+' s',
            getSmsCodeBtnColor:"#999",
            smsCodeDisabled: true
          });
        }else{
          that.setData({
            getSmsCodeBtnTxt:"获取验证码",
            getSmsCodeBtnColor:"#ff9900",
            smsCodeDisabled: false
          });
          count = 60;
          clearInterval(si);
        }
      },1000);
    } 
  },
  checkSmsCode:function(param){
    var smsCode = param.smsCode.trim();
    var tempSmsCode = '000000';//演示效果临时变量，正式开发需要通过wx.request获取
    if(smsCode!=tempSmsCode){
      wx.showModal({
        title: '提示',
        showCancel:false,
        content: '请输入正确的短信验证码'
      });
      return false;
    }else{
      return true;
    }
  },
  redirectTo:function(param){
    //需要将param转换为字符串
    param = JSON.stringify(param);
    wx.redirectTo({
      url: '../main/index?param='+ param//参数只能是字符串形式，不能为json对象
    })
  }

})

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

checkPhoneIsRegist:function(phoneNum){
      var tempPhoneNum = "13211112222";//测试未注册手机号码
      if(phoneNum==tempPhoneNum){
          wx.showModal({
          title: '提示',
          showCancel:false,
          content: '该手机尚未注册！'
        });
        return false;
      }else{
        return true;
      }
  },

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2019-08-30，如有侵权请联系 cloudcommunity@tencent.com 删除

短信