1.先来看下效果图
aa.gif
2.再来看下目录结构，我们需要新建两个页面，就像这样
bb.PNG
3.然后写我们最熟悉的html和css样式，这个就直接复制粘贴了
用户登录页面：
3.1 login.wxml
<view class="mcontainer">
<view class="item">
<image src="/image/logo.png" class="image" />
</view>
<view class="item">
<view class="login-item">
<view class="login-item-info">用户名</view>
<!--为了获取输入框的值，绑定一个事件-->
<view><input bindinput="usernameInput" /></view>
</view>
<view class="login-item">
<view class="login-item-info">密码</view>
<view class="login-pwd">
<input style="flex-grow:1" password="true" bindinput="passwordInput" />
<text> 忘记密码 </text>
</view>
</view>
<view class="login-item bottom">
<button class="login-btn" bindtap="loginBtnClick">登录</button>
</view>
</view>
<view class="item bottom-info">
<view> 没有账户? <text> 注册 </text> </view>
<view class="wechat-icon">
<image src="/image/wechat.png" />
</view>
</view>
</view>
3.2 login.wxss
.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%;
}
.image{
width: 250rpx;
height: 250rpx;
}
.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;
}
.bottom-info{
}
.wechat-icon{
margin-top: 30px;
width: 20px;
height: 20px;
border: 1px solid seagreen;
border-radius: 50%;
padding: 10px;
}
.wechat-icon image{
width: 20px;
height: 20px;
}
个人中心页面：
3.3 user.wxml
<view class="index-container">
<image src="/image/timg.jpg" class="pic"></image>
<image src="/image/logo.png" class="logo"></image>
<view class="nickname">
{{username}}
</view>
<ul class="list">
<li>修改密码</li>
<li>关于</li>
<li>设置</li>
</ul>
</view>
3.4 user.wxss
.index-container{
position: relative;
}
.pic{
width: 100%;
height: 400rpx;
}
.logo{
width:200rpx;
height: 200rpx;
position: absolute;
top: 130px;
left: 20px;
}
.nickname{
position: absolute;
top: 170px;
left: 120px;
font-size: 20px;
}
.list{
display: flex;
flex-direction: column;
margin-top: 60px;
}
.list>li{
width: 100%;
height: 40px;
line-height: 40px;
background-color:#fff;
border-bottom: 1px solid #eee;
border-top: 1px solid #eee;
padding-left: 20px;
}
4.接下来重点来了，我们要怎么样配置js里面的内容才能实现这个页面效果呢
4.1首先，我们要在app.js里面定义一下“用户信息”，用来存放用户名和密码
App({
// 定义用户信息，初始值为空
appData : {
userinfo : null,
}
})
4.2好，接下来，我们再来看下用户登录页面的login.js写些什么
4.2.1首先，用户登录页面有一个登录的按钮，当我们点击这个按钮的时候，我们希望它能跳转到个人中心页面，这样的话，我们需要给这个按钮绑定一个事件，就像这样
<button class="login-btn" bindtap="loginBtnClick">登录</button>
然后在login.js里面进一步描述一下这个事件，是用来干什么的，能实现一个什么样的效果
loginBtnClick:function (){
// 用户名和密码验证的过程
//建立一个类，存放用户名和密码
app.appData.userinfo = {
username:this.data.username,
password:this.data.password
}
// wx.redirectTo({url:"../user/user"}) //跳转后不能返回登录页面
wx.navigateTo({url:"../user/user"})
}
我们最开始想的是，点击“登录”按钮跳转到个人中心页面，可是我们没有输入用户名和密码，它一样能够跳转，这显然是不正常的，所以我们要先定一下它跳转的条件，当用户输入用户名和用户名的时候，它才能跳转
我们先在data里面定义一下，用username来接用户名，用password来接密码，初始值都为空
data:{
username:null,
password:null,
},
然后用前面建立的userinfo来存放用户名和密码，像这样
var app = getApp(); //获取一下app,我们刚刚建立的userinfo是一个公共类
loginBtnClick:function (){
// 用户名和密码验证的过程
//建立一个类，存放用户名和密码
app.appData.userinfo = {
username:this.data.username,
password:this.data.password
}
// wx.redirectTo({url:"../user/user"})
wx.navigateTo({url:"../user/user"})
}
4.2.2好，现在存放数据的盒子已经准备好了，那我们怎么把输入框中用户输入的信息值获取过来，并放在我们准备好的盒子里呢，我们先来看下官网，input组件有哪些属性
这两个组件是我们等下需要使用的
ab.PNG
ac.PNG
首先，我们需要给input 输入框绑定一个事件
<view class="login-item-info">用户名</view>
<!--为了获取输入框的值，绑定一个事件-->
<view><input bindinput="usernameInput" /></view>
<input style="flex-grow:1" password="true" bindinput="passwordInput" />
<text> 忘记密码 </text>
然后给这些事件分别修饰一下，看下它们都是用来干嘛的，能实现什么效果
usernameInput : function (event){
//console.log(event)观察结构
var username=event.detail.value
this.setData({
username
})
}
passwordInput : function (event){
this.setData({
password:event.detail.value
})
}
4.3接下来，我们来看一下个人中心页面的user.js怎么写
我们希望用户登录以后，他的用户名也能在跳转后的页面显示
所以，我们先在data里面定义一个username去接住用户名
data:{
username:null //用来装载输入框的值，也就是用户信息
}
然后在页面监听事件onLoad中，也就是当跳转到这个页面的一瞬间，你希望它有哪些改变
为了让客户有更好的体验，我们可以改一下页眉的标题
wx.setNavigationBarTitle({
title: '个人中心',
})
之前，我们有发现一个问题，就是用户名和密码是空的，但是我们点击“登录”按钮，他依然能够跳转，然后我们想当用户名和密码不为空的时候才允许他跳转，若是为空就只允许他呆在用户登录页面，我们前面已经成功的获取了输入框里面的值了，确定他不为空，那么现在我们怎么才能彻底解决这个问题呢
我们给一个if判断，为空只能呆在登录页面，有值就把用户名加载到username里面
onLoad:function(options){
wx.setNavigationBarTitle({
title: '个人中心',
})
if(app.appData.userinfo == null ){
// wx.navigateTo({url:"../login/login"})
wx.redirectTo({url:"../login/login"})
}else{
this.setData({
username:app.appData.userinfo.username
})
}
}
5.为了获取动态的用户名，我们使用一个{{}}传值
<view class="nickname">
{{username}}
</view>
