微信小程序云开发项目实战之商城开发日记 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等实战学习资料