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

发布：2018-02-10 11:29浏览：次来源：网络作者：cola

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

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

改app.json文件，添加tabBar

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 两个输入框(用户名和密码) 一个按钮当点击按钮时，验证用户名和密码是否正确，如果正确，则跳转到用户页面(用户的个人信息)。否则在登录页面有个错误提示"请输入正确的用户名和密码"。

<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>

.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事件

usernameInput

上一篇：微信小程序获取用户信息，解密encryptedData(JA

下一篇：微信小程序登录开发（JAVA）

免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。