当前位置：首页 > news >正文

鸿蒙OSUniApp 制作简洁的用户个人中心页面#三方框架 #Uniapp

news 来源：原创 2025/5/29 6:39:51

UniApp 制作简洁的用户个人中心页面

前言

用户个人中心页面是移动应用中不可或缺的模块，承载着用户信息展示、账户管理、功能入口等多重职责。一个简洁、实用的个人中心不仅能提升用户体验，还能增强产品的专业感。随着鸿蒙（HarmonyOS）生态的壮大，开发者对多端适配和高性能渲染提出了更高要求。本文将以 UniApp 为例，详细讲解如何开发一个美观、简洁、适配鸿蒙的用户个人中心页面。

一、需求与设计思路

1. 需求分析

展示用户头像、昵称、ID等基础信息
支持编辑资料、退出登录等操作
提供常用功能入口（如订单、收藏、设置等）
兼容鸿蒙平台，适配不同分辨率
结构清晰，视觉简洁，易于扩展

2. 设计思路

采用卡片式分区，突出用户信息与功能入口
使用 image 组件展示头像，支持懒加载
功能区采用宫格或列表布局，图标+文字提升易用性
结合 CSS 阴影、圆角、渐变等提升美观度
适配鸿蒙平台的安全区域与分辨率

二、核心代码实现

1. 页面结构

<template><view class="profile-page"><view class="profile-header"><image :src="user.avatar" class="avatar" mode="aspectFill" :lazy-load="true" /><view class="user-info"><view class="nickname">{{ user.nickname }}</view><view class="userid">ID: {{ user.id }}</view></view><button class="edit-btn" @click="editProfile">编辑资料</button></view><view class="profile-cards"><view class="card-grid"><view class="card-item" v-for="item in menu" :key="item.key" @click="onMenu(item)"><image :src="item.icon" class="icon" /><text class="label">{{ item.label }}</text></view></view></view><view class="logout-area"><button class="logout-btn" @click="logout">退出登录</button></view></view>
</template>

2. 脚本逻辑

<script>
export default {name: 'ProfilePage',data() {return {user: {avatar: 'https://cdn.example.com/avatar.jpg',nickname: '鸿蒙开发者',id: '10086',},menu: [{ key: 'order', label: '我的订单', icon: '/static/order.png' },{ key: 'fav', label: '我的收藏', icon: '/static/fav.png' },{ key: 'address', label: '收货地址', icon: '/static/address.png' },{ key: 'settings', label: '设置', icon: '/static/settings.png' },],};},methods: {editProfile() {uni.showToast({ title: '编辑资料', icon: 'none' });// 实际可跳转到资料编辑页},onMenu(item) {uni.showToast({ title: `点击了${item.label}`, icon: 'none' });// 实际可根据 item.key 跳转},logout() {uni.showModal({title: '提示',content: '确定要退出登录吗？',success: res => {if (res.confirm) {uni.showToast({ title: '已退出登录', icon: 'none' });// 实际应清除登录状态并跳转}},});},},
};
</script>

3. 样式设计

<style scoped>
.profile-page {min-height: 100vh;background: linear-gradient(180deg, #f5f7fa 0%, #fff 100%);padding-bottom: env(safe-area-inset-bottom);
}
.profile-header {display: flex;align-items: center;background: #fff;border-radius: 0 0 32rpx 32rpx;box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.06);padding: 48rpx 32rpx 32rpx 32rpx;margin-bottom: 32rpx;position: relative;
}
.avatar {width: 120rpx;height: 120rpx;border-radius: 50%;object-fit: cover;background: #eee;margin-right: 32rpx;
}
.user-info {flex: 1;
}
.nickname {font-size: 36rpx;color: #222;font-weight: bold;margin-bottom: 8rpx;
}
.userid {font-size: 24rpx;color: #999;
}
.edit-btn {position: absolute;right: 32rpx;top: 48rpx;font-size: 26rpx;color: #007aff;background: #f0faff;border-radius: 24rpx;padding: 8rpx 28rpx;border: none;
}
.profile-cards {margin: 0 24rpx 32rpx 24rpx;
}
.card-grid {display: flex;flex-wrap: wrap;background: #fff;border-radius: 18rpx;box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);padding: 24rpx 0;
}
.card-item {width: 25%;display: flex;flex-direction: column;align-items: center;padding: 24rpx 0;cursor: pointer;
}
.icon {width: 56rpx;height: 56rpx;margin-bottom: 12rpx;
}
.label {font-size: 26rpx;color: #333;
}
.logout-area {margin: 48rpx 24rpx 0 24rpx;
}
.logout-btn {width: 100%;height: 88rpx;background: #fff0f0;color: #ff4d4f;border-radius: 16rpx;font-size: 30rpx;border: none;box-shadow: 0 2rpx 8rpx rgba(255,77,79,0.04);
}
</style>