微信小程序云开发项目实战之商城开发日记 05
hello童鞋们，我又来了，今天写tabbar的最后一个页面，个人中心页。
个人中心页的布局也是比较常规的。其实当你看过了很多成品之后你会发现，代码千篇一律，重要的还是UI的设计。
顶部是一个头像和昵称的展示，然后下面是订单的板块，再下面是一些其它功能块的集合。
<view class="head">
<view class="user">
<open-data type="userAvatarUrl" mode="aspectFit" class="img">open-data>
<open-data type="userNickName" lang="zh_CN" class="name">open-data>
view>
view>
page {
background-color: #f3f3f3;
}
.head {
height: 250rpx;
background-color: #008000;
}
.user {
display: flex;
flex-direction: row;
color: white;
font-size: 40rpx;
padding-top: 80rpx;
}
.img {
width: 100rpx;
height: 100rpx;
margin-left: 50rpx;
border-radius: 50%;
overflow: hidden;
}
.name{
margin-left: 20rpx;
}
这里呢，我没有去通过getuserInfo去获取用户的个人信息，因为我只需要用户的昵称和头像即可，用open-data组件就可以实时获取。但是到了实际的应用场景里，肯定还是要拉起授权信息的。我们后面做商品评论的时候还会再做这个东西，所以我现在就先省个事。
下面是一个订单管理的区域
<view class="classify">
<view class="body" wx:for="{{classify}}">
<image src="{{item.image}}">image>
<text>{{item.text}}text>
view>
view>
.classify {
width: 88%;
background-color: white;
position: fixed;
left: 0;
right: 0;
margin: 0 auto;
z-index: 2;
margin-top: 20rpx;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
border-radius: 20rpx;
}
.body {
display: flex;
flex-direction: column;
width: 33%;
justify-content: center;
align-items: center;
}
.body > image {
width: 88rpx;
height: 88rpx;
margin-top: 20rpx;
}
.body > text {
text-align: center;
font-size: 28rpx;
margin-top: 20rpx;
margin-bottom: 20rpx;
font-weight: bold;
}
data: {
classify:[
{image:'../../images/img_2.png',text:'待收货'},
{image:'../../images/img_3.png',text:'已完成'},
{image:'../../images/img_4.png',text:'全部订单'}
],
},
这块我做的是一个小覆盖的操作，让这个订单管理和上面的个人信息叠加一部分，有层次感一些。如果不喜欢的同学可以自行删除，按照自己的设想做样式。
效果：
下面是一个广告栏和功能区。
广告栏可以放自己的商品推广，如果流量比较足的话，也可以接别人的推广。
功能区就是一些功能的汇总，比如我的收藏、招聘店员、包括可能后面会做的一些多级分销操作。
<image src="../../images/banner.jpg" mode="widthFix" class="poster">image>
<view class="menu">
<view class="menu_body" wx:for="{{menu}}">
<image src="{{item.image}}">image>
<text>{{item.text}}text>
view>
view>
.poster {
width: 88%;
height: 250rpx;
margin: 0 auto;
margin-top: 160rpx;
display: flex;
border-radius: 20rpx;
}
.menu {
width: 84%;
background-color: white;
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin: 0 auto;
margin-top: 20rpx;
margin-bottom: 200rpx;
border-radius: 20rpx;
padding: 20rpx;
}
.menu_body {
display: flex;
flex-direction: column;
width: 25%;
align-items: center;
justify-content: center;
}
.menu_body > image {
width: 70rpx;
height: 70rpx;
}
.menu_body > text {
display: flex;
margin-top: 10rpx;
font-size: 28rpx;
}
data: {
menu:[
{image:'../../images/shoucang.png',text:'我的收藏'},
{image:'../../images/shoucang.png',text:'功能1'},
{image:'../../images/shoucang.png',text:'功能2'},
{image:'../../images/shoucang.png',text:'功能3'},
]
},
效果：
没有啥需要特殊注意的地方，就是常规的flex布局和wx：for渲染。大家要多多练习，熟练掌握。
到现在为止我们已经完成了tabbar四个页面的前端内容编写。
项目的主体框架我们已经搭建完毕，如果大家时间充裕，并且没有做过太多微信小程序开发的同学，请认真的把这四个tabbar页面的前端代码敲一下。有任何不懂的都可以找我。
点赞、关注、收藏都是对作者莫大的鼓励，谢谢！
有任何问题可以联系QQ：505417246
零基础入门微信小程序云开发QQ群：1073011570
关注下面微信公众号，可以领取微信小程序、Vue、TypeScript、前端、uni-app、全栈、Nodejs等实战学习资料
