uniapp 个人中心页面开发指南

问题背景与解决方案

在开发个人中心页面时，由于使用了自定义导航导致顶部状态栏消失。为了解决这个问题，我们采用了以下方案：

状态栏适配

在 @/utils/ 目录下的 system.js 文件中，我们使用了一个名为 getNavBarHeight() 的方法来处理状态栏和标题栏的高度适配：

javascript 复制代码

// 导入系统工具
import system from '@/utils/system.js'

// 获取导航栏高度方法
getNavBarHeight() {
  // 处理状态栏和标题栏的高度适配
  // 返回计算后的高度值（需带上px单位）
}

/**
 * 获取导航栏高度（状态栏 + 标题栏）
 * @returns {number} 导航栏总高度（像素值）
 */
export const getNavBarHeight = () => {
  try {
    // 获取系统信息
    const systemInfo = uni.getSystemInfoSync()
    
    // 获取状态栏高度
    const statusBarHeight = systemInfo.statusBarHeight || 0
    
    // 根据不同平台计算标题栏高度
    let titleBarHeight = 0
    
    // #ifdef APP-PLUS
    // APP端标题栏高度
    titleBarHeight = 44
    // #endif
    
    // #ifdef MP-WEIXIN
    // 微信小程序标题栏高度
    const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
    titleBarHeight = (menuButtonInfo.top - statusBarHeight) * 2 + menuButtonInfo.height
    // #endif
    
    // #ifdef H5
    // H5端标题栏高度
    titleBarHeight = 44
    // #endif
    
    // 计算总高度
    const navBarHeight = statusBarHeight + titleBarHeight
    
    console.log('导航栏高度计算:', {
      状态栏高度: statusBarHeight,
      标题栏高度: titleBarHeight,
      总高度: navBarHeight,
      平台: systemInfo.platform
    })
    
    return navBarHeight
    
  } catch (error) {
    console.error('获取导航栏高度失败:', error)
    
    // 降级方案：返回默认高度
    const defaultHeight = 88 // iOS默认高度
    
    console.warn('使用默认导航栏高度:', defaultHeight)
    return defaultHeight
  }
}

页面布局调整

在个人中心页面的布局中，我们在顶部添加了一个空白盒子来占位：

html 复制代码

<view class="container">
  <!-- 状态栏占位 -->
  <view class="status-bar" :style="{ height: getNavBarHeight() + 'px' }"></view>
  
  <!-- 页面内容 -->
  <view class="content">
    <!-- 个人中心内容 -->
  </view>
</view>

数据获取与展示

接口调用

我们通过调用用户信息接口获取个人数据：

javascript 复制代码

// 导入API
import { getUserInfo } from '@/api/users.js'

// 定义数据
const userInfo = ref(null)

// 获取用户信息方法
const getUserInfoData = async () => {
  try {
    const res = await getUserInfo()
    userInfo.value = res.data
    console.log('用户数据:', userInfo.value)
  } catch (error) {
    console.error('获取用户信息失败:', error)
  }
}

数据结构

接口返回的数据包含以下字段：

javascript 复制代码

{
  "data": {
    "uid": "用户ID",
    "address": {
      "country": "国家",
      "province": "省份", 
      "city": "城市"
    },
    "downloadSize": "下载数量",
    "ratingSize": "评分数量"
  }
}

数据展示与容错处理

在模板中展示数据时，我们添加了条件渲染和容错处理：

html 复制代码

<template>
  <!-- 整体容器，添加条件渲染 -->
  <view v-if="userInfo" class="user-info-container">
    <!-- 用户ID -->
    <view class="user-id">{{ userInfo.uid }}</view>
    
    <!-- 地址信息（多层容错） -->
    <view class="location">
      {{ userInfo.address?.city || userInfo.address?.province || userInfo.address?.country || '未知地区' }}
    </view>
    
    <!-- 下载和评分数量 -->
    <view class="stats">
      <view class="stat-item">
        <text>我的下载</text>
        <text class="count">{{ userInfo.downloadSize }}</text>
      </view>
      <view class="stat-item">
        <text>我的评分</text> 
        <text class="count">{{ userInfo.ratingSize }}</text>
      </view>
    </view>
  </view>
  
  <!-- 加载状态 -->
  <view v-else class="loading-container">
    <view class="loading-placeholder"></view>
    <loading-component />
  </view>
</template>

关键实现细节

1. 条件渲染避免报错

由于数据是异步获取的，初始时 userInfo 为 null，直接访问其属性会导致错误。我们使用条件渲染和可选链操作符来避免这个问题。

2. 地址显示优先级

地址信息展示采用三级容错机制：

优先显示城市
城市不存在则显示省份
省份不存在则显示国家

3. 加载状态优化

在数据加载期间显示加载动画，提升用户体验：

html 复制代码

<view class="loading-container">
  <!-- 顶部占位，避免加载样式与状态栏重叠 -->
  <view class="loading-placeholder" :style="{ height: getNavBarHeight() + 'px' }"></view>
  <loading-component />
</view>

总结

通过以上实现，我们完成了个人中心页面的：

顶部状态栏的正确适配
用户数据的异步获取和展示
良好的加载状态和错误处理
多层容错的数据展示逻辑

这个页面作为用户个人数据的展示中心，为后续功能（如"我的下载"、"我的评分"等）提供了基础框架。