个人中心页面很常用，几乎每个app里面都少不了。同时个人中心页也较简单，可以作为UI项目练手，熟悉常用UI界面的设计和flex布局。这里分享下一款简约的个人中心页面，并详细介绍从零的实现过程，分享给有需要的小伙伴，需要的可以收藏。
基本流程
在uni-app中设计个人中心页面，通常需要考虑以下步骤：
1.页面布局规划
分析个人中心需要展示的内容，如头像、昵称、积分、订单、收藏、设置等。
设计合理的布局，通常采用顶部导航栏、底部导航栏和中间内容区的结构。
2.创建页面结构
创建一个新的Vue组件，例如命名为PersonalCenter.vue。在组件中设置基本的HTML结构。
3.样式设计
使用CSS（如SCSS、Less等预处理器）来定义样式，确保跨平台兼容性。
应用uni-app的CSS变量和组件样式，如uni-row和uni-col来创建网格布局。
使用uni-icons组件添加图标。
4.组件化
这一步非必须，根据需要，将可复用的部分（如订单列表、个人资料卡片等）拆分为单独的组件。例如，创建一个UserInfoCard.vue用于展示用户基本信息。
5.数据绑定
通过data属性定义页面需要的数据。
使用v-model或props从父组件传递数据。
使用uni.request()获取服务器数据。
6.交互逻辑
实现点击事件监听，例如点击某个按钮跳转到详情页或执行其他操作。
使用methods定义事件处理函数。
7.状态管理
可以考虑使用Vuex进行状态管理，尤其是当页面有复杂的交互或多个组件需要共享状态时。
8.页面路由
配置pages.json以包含个人中心页面的路由信息。
可以使用uni-router或vue-router进行页面间的导航。
8.测试与优化
在模拟器或真机上测试页面显示和交互。
根据反馈调整布局和样式，确保在不同设备上表现良好。
9.发布与部署
编译并打包uni-app项目。
将打包后的代码上传到对应的小程序平台进行审核和发布。
以上只是一个基本流程。在实际开发中还需要考虑更多细节，例如错误处理、网络状态管理、用户体验优化等。随着项目进展，你可能需要根据需求不断迭代和优化设计。
环境准备
1.下载并使用最新版本的HbuilderX开发工具。工具下载地址：
2.新建一项目，直接选择最基础的一个uni-app的hello-world工程模版。
3.下载并安装uni-ui组件。根据官方建议，使用组件的顺序为：内置组件-> ui-ui组件 -> 三方组件。
实现过程
一般如果有UI设计人员的话，都会给出一个效果图和图片素材，帮你切好图片资源。如果没有效果图，则根据自己的设想，参考一些其它APP的个人中心页面，分析下界面内容和布局，最后实现自己的设计。
通过分析，可以知晓大致有哪些内容，需要什么布局结构等。接下来开始实现过程。
把整体页面分为几个部分：
头部模块
头部模块中间的区域模块，统计模块和下方的item条目模块。
<template>
<view class="wrapper">
<!-- 个人资料 -->
<view>
<view class="top">
<view class="center">
</view>
</view>
</view>
<!-- 统计 -->
<view class="count">
</view>
<!-- 其它 -->
<view class="extra">
</view>
</view>
</template>wrapper整体页面的样式设计，css样式类wrapper和头部样式设计。
<template>
<view class="wrapper">
</view>
</template>
<style>
.wrapper {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
background-color: #F4F4F4;
}
.top {
width: 100%;
height: 200rpx;
background: #2979ff;
padding-top: 30rpx;
position: relative;
}
</style>
头部的中间区域
注意style后面别忘加scoped和lang属性。
在Vue组件的<style>标签中使用scoped属性时，它会告诉Vue将此<style>块中的CSS样式限制在当前组件范围内。这意味着这些样式只会应用到当前组件的元素上，不会影响到其他组件或全局样式，从而实现了CSS的模块化，避免冲突。
lang属性用来指定<style>标签中CSS代码的预处理器语言。Vue和uni-app支持多种预处理器，如Sass、Less、Stylus等。作用: 允许开发者使用预处理器的语法编写CSS，提高编写效率，支持变量、注释、嵌套、混合、函数等功能。例如，使用lang="less"可以让Vue识别并编译Less代码。
<template>
<view class="wrapper">
<view class="top">
<view class="center">
<view class="center_top">
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello'
}
},
onLoad() {
},
methods: {
}
}
</script>
<style scoped lang="scss">
.wrapper {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
background-color: #F4F4F4;
}
.top {
width: 100%;
height: 200rpx;
background: #2979ff;
padding-top: 30rpx;
position: relative;
}
.center {
width: 95%;
height: 160rpx;
background: #55aaff;
display: flex;
flex-direction: column;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
margin: 0 auto;
border-radius: 5rpx;
}
.center_top {
display: flex;
min-width: 350rpx;
flex-direction: row;
background: #ffaa7f;
height: 100rpx;
margin-top: 0rpx;
border-bottom: 1rpx solid #5555ff;
}
</style>
头像和显示昵称
.center_top是个flex布局，内部包含center_img和center_info的横向排列。所以center_top的flex-direction应设置为 row，横向排列。center_info又包含昵称和vip会员等级显示内容，是个纵向的布局关系。
头像和显示昵称的flex布局样式：
.center_top {
display: flex;
min-width: 350rpx;
flex-direction: row;
//background: #ffaa7f;
height: 100rpx;
margin-top: 0rpx;
border-bottom: 1rpx solid #5555ff;
}
.center_img {
width: 90rpx;
height: 90rpx;
border-radius: 50%;
overflow: hidden;
}
.center_info {
display: flex;
flex-direction: column;
margin-top: 20rpx;
margin-left: 20rpx;
}
.center_name {
font-size: 14rpx;
}
.vip_text {
font-size: 14rpx;
margin-top: -33rpx;
margin-left: 40rpx;
color: #AAAAAA;
}其中会员的显示有个钻石的icon的图标，这个有现成的uni-icon可以用。
<uni-icons type="vip" size="14"></uni-icons>图标资源介绍，参见uni-app官网：uni-icons 图标 | uni-app官网
统计模块
主要用于个具有弹性和居中对齐的容器.count，并且包含两种类型的子元素.cell和.text，它们有自己的样式和布局特性。这样的设计可能用于显示数量、统计或其他需要分组的文本信息。
<template>
<view class="wrapper">
<view class="top">
<view class="center">
<view class="center_top">
</view>
</view>
</view>
<!-- 统计 -->
<view class="count">
<view class="cell"> 8 <text style="color: #AAAAAA;">收藏影视</text> </view>
<view class="cell"> 14 <text style="color: #AAAAAA;">历史记录</text> </view>
<view class="cell"> 18 <text style="color: #AAAAAA;">关注信息</text> </view>
<view class="cell"> 84 <text style="color: #AAAAAA;">我的足迹</text> </view>
</view>
</view>
</template>
<style scoped lang="scss">
.count {
display: flex;
margin: 0 20rpx;
height: 120rpx;
text-align: center;
border-radius: 4rpx;
background-color: #fff;
position: relative;
top: 10rpx;
.cell {
margin-top: 10rpx;
flex: 1;
padding-top: 20rpx;
font-size: 27rpx;
color: #333;
}
text {
display: block;
font-size: 24rpx;
}
}
</style>.count
设置为display: flex;，意味着这个元素将作为一个弹性容器，其子元素将按照弹性布局排列。
margin: 0 20rpx;设置上下无边距，左右边距为20rpx，提供内缩的视觉效果。
text-align: center;使.count内的文本居中对齐。
border-radius: 4rpx;给.count添加4rpx的圆角，提升视觉效果。
position: relative;将.count设置为相对定位，以便后续可以使用绝对定位相对于它自身进行定位。
top: 10rpx;将.count向上偏移10rpx，可能会与其他元素产生位置关系。
没有指定flex-direction，则默认是横向排列，与flex-direction: row等同。
.cell
是.count内的子元素，设置margin-top: 10rpx;为其添加顶部边距。
.cell的flex: 1;表示在弹性布局中，分配剩余空间，使得它能自适应容器宽度。
.cell的padding-top: 20rpx;设置内部顶部填充，提供与内容的距离。
.text
.text是另一个嵌套的子元素
display: block;确保它作为独立的块级元素显示。
块级元素的特点是它们会在垂直方向上占据一整行，彼此之间默认有换行。块级元素可以设置宽度（width）和高度（height），而行内元素通常不能直接设置宽高（除非使用display: inline-block;或float）。块级元素的宽度默认是其父元素的100%，除非另有指定。有时候还可用于清除浮动元素的影响，例如，通过在非浮动的兄弟元素上使用display: block;来确保它们不会跟随浮动元素。
display: block;是布局和设计中一个非常基础且重要的工具，它允许开发者更好地控制元素的外观和布局。
显示条目
这部分内容简单，用uni-list-item组件可以用。如果不加样式，看到的是上图红框中的效果，这跟设计的不符合，所以也需要设计下样式。
.extra {
margin: 10rpx 20rpx;
background-color: #fff;
border-radius: 4rpx;
.item {
line-height: 1;
padding: 25rpx 0 25rpx 20rpx;
border-bottom: 1rpx solid #eee;
font-size: 30rpx;
color: #333;
}
button {
text-align: left;
background-color: #fff;
&::after {
border: none;
border-radius: 0;
}
}
}完整页面代码
包含登录状态的切换及跳转到其他页面。
<template>
<view class="wrapper">
<!-- 个人资料 -->
<view>
<view class="top">
<view class="center">
<view v-if="isLoggedIn">
<view class="center_top">
<view class="center_img" >
<!-- 这里可以放自己的静态头像 -->
<image src="/static/me.jpg"></image>
<!-- <open-data type="userAvatarUrl" class="user_head"></open-data> -->
</view>
<view class="center_info" >
<view class="center_name">
特立独行的猫
</view>
<view class="center_vip">
<uni-icons type="vip" size="14"></uni-icons>
<view class="vip_text">
<text>普通会员</text>
</view>
</view>
<!-- 其他个人中心内容 -->
</view>
</view>
</view>
<view v-else class="loginButton" @click="onLoginClick">登录</view>
</view>
</view>
</view>
<!-- 统计 -->
<view class="count">
<view class="cell"> 8 <text style="color: #AAAAAA;">收藏影视</text> </view>
<view class="cell"> 14 <text style="color: #AAAAAA;">历史记录</text> </view>
<view class="cell"> 18 <text style="color: #AAAAAA;">关注信息</text> </view>
<view class="cell"> 84 <text style="color: #AAAAAA;">我的足迹</text> </view>
</view>
<!-- 其它 -->
<view class="extra">
<uni-list>
<uni-list-item showArrow title="我的消息" ></uni-list-item>
<uni-list-item showArrow title="意见反馈" ></uni-list-item>
<uni-list-item showArrow title="分享链接" @click.native="onShareClick($event,1)" link></uni-list-item>
<uni-list-item showArrow title="关于我们" link to="/pages/about/about?item=2"></uni-list-item>
<!-- <uni-list-item showArrow title="关于我们" link="navigateTo" :to="'/pages/about/about?item=1'"></uni-list-item> -->
</uni-list>
</view>
</view>
</template>
<script>
export default {
data() {
return {
isLoggedIn: true,
userInfo: {}
}
},
computed: {
},
created(){
},
methods: {
onLoginClick() {
// 跳转至登录页面
//uni.navigateTo({ url: '/pages/login/login' });
},
onShareClick($event,args){
console.log($event);
console.log("onShareClick");
uni.share({
provider: "weixin",
scene: "WXSceneSession",
type: 0,
href: "http://uniapp.dcloud.io/",
title: "分享的标题",
summary: "分享的内容",
imageUrl: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni@2x.png",
success: function (res) {
console.log("success:" + JSON.stringify(res));
},
fail: function (err) {
console.log("fail:" + JSON.stringify(err));
}
});
}
}
};
</script>
<style scoped lang="scss">
Page {
font-size: 14rpx;
}
.top {
width: 100%;
height: 200rpx;
// background: #23EBB9;
background: #2979ff;
padding-top: 30rpx;
position: relative;
}
.center {
width: 95%;
height: 160rpx;
background: #55aaff;
display: flex;
flex-direction: column;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
margin: 0 auto;
border-radius: 5rpx;
}
.center_top {
display: flex;
min-width: 350rpx;
flex-direction: row;
//background: #ffaa7f;
height: 100rpx;
margin-top: 0rpx;
border-bottom: 1rpx solid #5555ff;
}
.center_img {
width: 90rpx;
height: 90rpx;
border-radius: 50%;
overflow: hidden;
}
.center_img image {
width: 100%;
height: 100%;
}
.center_img .user_head {
width: 100%;
height: 100%;
}
.center_info {
display: flex;
flex-direction: column;
margin-top: 20rpx;
margin-left: 20rpx;
}
.center_name {
font-size: 14rpx;
}
.center_phone {
color: #BEBEBE;
}
// .center_down {
// display: flex;
// flex-direction: row;
// width: 80%;
// height: 35px;
// margin: 0 auto;
// margin-top: 20rpx;
// }
.center_rank {
width: 50%;
height: 35rpx;
display: flex;
flex-direction: row;
}
.rank_text {
height: 35rpx;
line-height: 35rpx;
margin-left: 10rpx;
color: #AAAAAA;
}
.center_vip image {
width: 20rpx;
height: 20rpx;
margin-top: 10rpx;
}
.vip_icon {
width: 25rpx;
height: 25rpx;
margin-top: 5rpx;
}
.vip_text {
font-size: 14rpx;
margin-top: -33rpx;
margin-left: 40rpx;
color: #AAAAAA;
}
.center_rank image {
width: 35rpx;
height: 35rpx;
}
.center_score {
width: 50%;
height: 35rpx;
display: flex;
flex-direction: row;
}
.center_score image {
width: 35rpx;
height: 35rpx;
}
.gif-wave {
position: absolute;
width: 100%;
bottom: 0;
left: 0;
z-index: 99;
mix-blend-mode: screen;
height: 100rpx;
}
.wrapper {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
background-color: #F4F4F4;
}
.profile {
height: 375rpx;
background-color: #ea4451;
display: flex;
justify-content: center;
align-items: center;
.meta {
.avatar {
display: block;
width: 140rpx;
height: 140rpx;
border-radius: 50%;
border: 2rpx solid #fff;
overflow: hidden;
}
.nickname {
display: block;
text-align: center;
margin-top: 20rpx;
font-size: 30rpx;
color: #fff;
}
}
}
.count {
display: flex;
margin: 0 20rpx;
height: 120rpx;
text-align: center;
border-radius: 4rpx;
background-color: #fff;
position: relative;
top: 10rpx;
.cell {
margin-top: 10rpx;
flex: 1;
padding-top: 20rpx;
font-size: 27rpx;
color: #333;
}
text {
display: block;
font-size: 24rpx;
}
}
.orders {
margin: 20rpx 20rpx 0 20rpx;
padding: 40rpx 0;
background-color: #fff;
border-radius: 4rpx;
.title {
padding-left: 20rpx;
font-size: 30rpx;
color: #333;
padding-bottom: 20rpx;
border-bottom: 1rpx solid #eee;
margin-top: -30rpx;
}
.sorts {
padding-top: 30rpx;
text-align: center;
display: flex;
}
[class*="icon-"] {
flex: 1;
font-size: 24rpx;
&::before {
display: block;
font-size: 48rpx;
margin-bottom: 8rpx;
color: #ea4451;
}
}
}
.address {
line-height: 1;
background-color: #fff;
font-size: 30rpx;
padding: 25rpx 0 25rpx 20rpx;
margin: 10rpx 20rpx;
color: #333;
border-radius: 4rpx;
}
.extra {
margin: 10rpx 20rpx;
background-color: #fff;
border-radius: 4rpx;
.item {
line-height: 1;
padding: 25rpx 0 25rpx 20rpx;
border-bottom: 1rpx solid #eee;
font-size: 30rpx;
color: #333;
}
button {
text-align: left;
background-color: #fff;
&::after {
border: none;
border-radius: 0;
}
}
}
.icon-arrow {
position: relative;
&::before {
position: absolute;
top: 50%;
right: 20rpx;
transform: translateY(-50%);
}
}
.loginButton {
padding: 20rpx 60rpx;
width: 30%;
background-color: #ffffff; /* 设置背景颜色为蓝色 */
color: #00aa00; /* 设置文本颜色为白色 */
font-size: 24rpx; /* 设置字体大小为 16px */
text-align: center;
border-radius: 35rpx; /* 设置圆角 */
cursor: pointer; /* 设置鼠标样式为指针 */
}
</style>
Flex布局
简单介绍下Flex布局。Flex布局很强大，与传统的布局方式相比，Flex布局的语法和理解起来更加简单，容易上手。Flex布局可以方便地实现多列等高布局。Flex布局支持各种对齐方式，包括水平和垂直对齐，并且可以通过设置order属性对子元素进行排序。
flex的6 个属性：
flex-direction：决定主轴的方向。
flex-wrap：如果一条轴线排不下，如何换行。
flex-flow：flex-direction 属性和 flex-wrap 属性的简写属性。
justify-content：定义项目在主轴上的对齐方式。
align-items：定义项目在交叉轴上如何对齐。
align-content：定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
flex-direction属性：
flex-direction属性决定主轴的方向（即项目的排列方向）。
.box { flex-direction: row | row-reverse | column | column-reverse;}
写在最后
最后，附上完整项目工程代码，可直接使用HbuliderX工具打开并运行。下载地址：
https://download.csdn.net/download/qq8864/89377440
其他资源
Link 超链接 | uview-plus 3.0 - 全面兼容nvue的uni-app生态框架 - uni-app UI框架
【uniapp APP分享到微信】_uni-app_cv全粘工程师-华为云开发者联盟
https://zhuanlan.zhihu.com/p/377807139?utm_id=0
7794
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
