更新记录

1.0.0（2025-11-17）

v1.0.0 (2025-11-17)

平台兼容性

uni-app(3.6.14)

其他

uni-app "我的"页面模板库

一个包含 25 种不同风格的"我的"(个人中心)页面模板集合,适用于 uni-app 跨平台开发(微信小程序、H5、App)。

📱 项目简介

本项目提供了 25 个精心设计的个人中心页面模板,涵盖多种设计风格和垂直行业场景,开发者可以根据项目需求快速选择和集成合适的模板。所有模板均采用统一的接口规范,支持一键切换。

✨ 特性

• 🎨 25 种风格模板 - 从简约到奢华,从现代到传统,风格多样
• 🏢 垂直行业覆盖 - 电商、汽车、外卖、出行、地图等多个行业场景
• 📱 跨平台兼容 - 支持微信小程序、H5、iOS、Android
• 🔄 实时切换预览 - 底部切换栏支持快速查看所有模板效果
• 🎯 统一接口规范 - 所有模板使用相同的 Props 和 Events,易于集成
• 💎 高质量设计 - 现代化 UI 设计,丰富的动画效果

🎭 模板列表

基础风格系列 (1-6)

• Style 1 - 卡片式: 经典卡片布局,清晰的信息层级
• Style 2 - 渐变风: 紫色渐变背景,时尚现代
• Style 3 - 专业版: 蓝色商务风格,专业稳重
• Style 4 - 资产版: 金融资产展示,数据可视化
• Style 5 - 至尊版: VIP 会员主题,尊贵感设计
• Style 6 - 玻璃态: 毛玻璃效果,轻盈透明

设计风格系列 (7-12)

• Style 7 - 深色系: 深色主题,炫酷光效
• Style 8 - 极简风: 极简设计,留白美学
• Style 9 - 波浪风: 波浪动画,活力十足
• Style 10 - 科技感: 黑客风格,Matrix 主题
• Style 11 - 商务版: 商务蓝色,数据趋势展示
• Style 12 - 社交风: 社交媒体风格,封面照片设计

场景主题系列 (13-16)

• Style 13 - 游戏风: 游戏化设计,星空背景,经验值系统
• Style 14 - 健康版: 健康管理主题,数据进度条
• Style 15 - 旅行风: 旅行足迹,大图展示
• Style 16 - 奢华版: 奢华 VIP,金黑配色,旋转光环

潮流艺术系列 (17-20)

• Style 17 - 赛博朋克: 霓虹绿配色,扫描线动画,八边形头像
• Style 18 - 彩色流动: 渐变流动动画,玻璃态卡片
• Style 19 - 扁平化: Material Design 风格,纯色块设计
• Style 20 - 水墨风: 中国风水墨画,印章元素

垂直行业系列 (21-25)

• Style 21 - 商城: 电商购物主题,订单状态,商品推荐
• Style 22 - 汽车: 车主服务,车辆管理,保养记录
• Style 23 - 外卖: 美食外卖,订单跟踪,红包优惠
• Style 24 - 打车: 出行服务,行程记录,钱包充值
• Style 25 - 地图: 地图探索,足迹可视化,位置收藏

📦 项目结构

my/
├── components/
│       ├── mystyle/
│       │   └── mystyle.vue
│       ├── style1/
│       │   └── style1.vue      # 卡片式
│       ├── style2/
│       │   └── style2.vue      # 渐变风
│       ├── style3/
│       │   └── style3.vue      # 专业版
│       ├── ...
│       └── style25/
│           └── style25.vue     # 地图
├── pages/
│   └── my/
│       └── my.vue          # 主页面(集成所有模板)
├── App.vue
├── main.js
├── manifest.json
├── pages.json
└── README.md
## 🚀 快速开始

1. **打开项目**：使用 HBuilderX 打开项目文件夹
2. **选择运行平台**：在 HBuilderX 中点击运行按钮，选择目标平台（微信小程序、H5、App等）
3. **预览模板**：运行后在 `pages/my/my.vue` 中已集成所有模板，通过底部切换栏可以实时预览不同风格

#### 单独使用某个模板

```vue
<template>
  <view>
    <myStyle1 
      :userInfo="userInfo"
      :isLogin="isLogin"
      @login="handleLogin"
      @statClick="handleStatClick"
      @menuClick="handleMenuClick"
    ></myStyle1>
  </view>
</template>

<script>
import myStyle1 from '@/components/style1/style1.vue'

export default {
  components: { myStyle1 },
  data() {
    return {
      isLogin: false,
      userInfo: {
        avatar: 'https://example.com/avatar.jpg',
        nickname: '用户昵称',
        desc: '个性签名',
        level: 5
      }
    }
  },
  methods: {
    handleLogin() {
      // 登录逻辑
    },
    handleStatClick(item) {
      // 统计项点击
      console.log('点击统计项:', item)
    },
    handleMenuClick(item) {
      // 菜单点击
      console.log('点击菜单:', item)
    }
  }
}
</script>

📝 接口规范

所有模板遵循统一的接口规范:

Props

Events

userInfo 对象结构

{
  avatar: String,    // 头像 URL
  nickname: String,  // 用户昵称
  desc: String,      // 个性签名/描述
  level: Number      // 用户等级
}

🎨 自定义开发

创建新模板

1. 在 components/ 目录下创建新的文件夹，并在其中创建 .vue 文件
2. 按照统一接口规范编写组件
3. 在 pages/my/my.vue 中导入并注册组件
4. 添加到 styleList 数组
5. 在模板区域添加条件渲染

修改现有模板

每个模板都是独立的 .vue 单文件组件,可以直接修改样式和逻辑:

<template>
  <!-- 修改 HTML 结构 -->
</template>

<script>
export default {
  // 修改逻辑
}
</script>

<style scoped>
/* 修改样式 */
</style>

🎯 设计特点

视觉设计

• 渐变色应用: 多处使用 CSS 渐变营造层次感
• 动画效果: 关键帧动画、过渡效果提升交互体验
• 毛玻璃效果: backdrop-filter 实现现代化设计
• 响应式布局: 使用 rpx 单位适配不同设备

技术实现

• Vue 2/3 语法: 兼容 uni-app 框架
• 条件渲染: v-if/v-else-if 保证小程序兼容性
• 事件系统: 统一的 emit 事件管理
• 模块化组件: 每个模板独立封装在单独文件夹中，便于维护和管理

📱 兼容性

uni-app 版本支持

• 支持版本: uni-app、uni-app x
• uni-app 最低兼容版本: 2.0.0
• uni-app x 最低兼容版本: 3.0.0

前端平台兼容性

其他特性

• 是否适配宽屏: 是
• 是否支持多语言: 是
• 是否适配暗黑模式: 是

🎉 适用场景

• 📱 社交应用个人主页
• 🛍️ 电商平台用户中心
• 🎮 游戏应用个人资料
• 💼 企业应用员工信息
• 🏥 健康管理个人档案
• 🚗 出行应用用户中心
• 🍔 生活服务个人页面
• 🗺️ 地图应用我的足迹

📧 联系方式

如有问题或建议,欢迎反馈。

⭐ 如果这个项目对你有帮助,请给一个 Star!