uni-app小程序开发实战 | (从零设计一款个人中心页面，最详细)_uniapp我的页面设计

个人中心页面很常用，几乎每个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开发工具。工具下载地址：

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

其他资源

uni-app官网

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

Uniapp｜爬坑之真机点击无效 - 知乎

豆瓣接口文档 · 微信小程序 · 看云

flex弹性布局（详解）_flex布局-CSDN博客

https://feizhaojun.com/?p=3813

uni-app官网

豆瓣 Api V2（测试版） | doubanapi