微信小程序–注册登录效果(登录)

效果图如下:


登录页面布局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
    });
    
  },

GitHub代码地址:https://github.com/demi520/wxapp-login-regist

发布者

小五

前端开发爱好者,关注前端新技术。