您现在的位置: 微信小程序 > 微信小程序开发 > 教程 >

小程序学习笔记《四》用户登录

来源:微信小程序 编辑:Yiyongtong.com 发布时间:2018-02-10 11:28热度:

利用quickstart工程,实现用户登录过程,并简单校验用户名和密码是否正确。

1.底部有两个tabBar(首页/个人中心) 
2.个人中心显示用户信息。 
首次切换到个人中心,需要先登录,才能看到个人信息。登录后,就一直显示用户信息。

改app.json文件,添加tabBar

 

  1. app.json
    {
    "pages":[
    "pages/index/index",
    "pages/user/user",
    "pages/login/login"
    ],
    "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
    },
    "tabBar": {
    "list": [{
    "pagePath": "pages/index/index",
    "text": "首页"
    },{
    "pagePath": "pages/user/user",
    "text": "个人中心"
    }]
    }
    }

添加用户登录页面login  两个输入框(用户名和密码)  一个按钮  当点击按钮时,验证用户名和密码是否正确,如果正确,则跳转到用户页面(用户的个人信息)。  否则在登录页面有个错误提示"请输入正确的用户名和密码"。

login.wxml

 

  1. <view class="mcontainer">
    <view class="item">
    <view class="login-item">
    <view class="login-item-info">用户名</view>
    <view><input /></view>
    </view>
    <view class="login-item">
    <view class="login-item-info">密码</view>
    <view class="login-pwd">
    <input style="flex-grow:1" password="true" />
    <text> 忘记密码 </text>
    </view>
    </view>
    <view class="login-item bottom">
    <button class="login-btn" >登录</button>
    </view>
    <view class="login-item bottom">
    <text> 用户名或密码错误 </text>
    </view>
    </view>
    </view>

login.wxss

 

  1. .mcontainer {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    }
    .item{
    flex-grow:1;
    height: 30%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 96%;
    padding: 0 2%;
    }
    .login-item{
    width: 90%;
    margin-top: 30rpx;
    border-bottom: 1px solid #eee;
    flex-grow:1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: 20rpx;
    }
    
    .bottom{
    border-bottom: 0px;
    }
    
    .login-item-info{
    font-size: 8px;
    color: #888;
    padding-bottom: 20rpx;
    }
    
    .login-pwd{
    display: flex;
    justify-content: space-between;
    flex-grow: 1;
    align-items: center;
    
    }
    
    .login-pwd text{
    height: 100%;
    font-size: 14px;
    color: #888;
    display: flex;
    
    }
    .login-btn{
    width: 80%;
    color: white;
    background-color: green;
    border-radius: 0;
    font-size: 14px;
    
    }
    .login-btn:hover{
    width: 80%;
    color: white;
    border-radius: 0;
    
    }

绑定bindinput事件

 

  1. usernameInput