uniapp我的页面

uniapp 我的页面开发指南

页面结构设计

在uniapp中创建我的页面通常需要设计清晰的用户信息展示区、功能入口区和设置区。典型结构包括顶部用户信息卡片、中间功能列表和底部操作按钮。

<template>
  <view class="my-page">
    <!-- 用户信息区 -->
    <view class="user-card">
      <image class="avatar" :src="userInfo.avatar"></image>
      <text class="username">{{userInfo.name}}</text>
    </view>

    <!-- 功能列表区 -->
    <view class="func-list">
      <uni-list>
        <uni-list-item title="我的订单" showArrow></uni-list-item>
        <uni-list-item title="收货地址" showArrow></uni-list-item>
        <uni-list-item title="优惠券" showArrow></uni-list-item>
      </uni-list>
    </view>

    <!-- 设置按钮 -->
    <button class="logout-btn" @click="logout">退出登录</button>
  </view>
</template>

数据绑定与状态管理

需要处理用户登录状态和获取用户信息，建议使用vuex进行状态管理。

<script>
import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState(['userInfo'])
  },
  methods: {
    logout() {
      uni.showModal({
        title: '提示',
        content: '确定要退出登录吗？',
        success: (res) => {
          if (res.confirm) {
            this.$store.commit('logout')
            uni.reLaunch({ url: '/pages/login/login' })
          }
        }
      })
    }
  }
}
</script>

样式优化

我的页面通常需要注重视觉体验，建议使用flex布局和适当的间距。

<style lang="scss">
.my-page {
  padding: 20rpx;

  .user-card {
    display: flex;
    align-items: center;
    padding: 30rpx;
    background: linear-gradient(to right, #3a7bd5, #00d2ff);
    border-radius: 16rpx;
    margin-bottom: 30rpx;

    .avatar {
      width: 120rpx;
      height: 120rpx;
      border-radius: 50%;
      margin-right: 30rpx;
    }

    .username {
      color: white;
      font-size: 36rpx;
    }
  }

  .logout-btn {
    margin-top: 60rpx;
    background: #ff5a5f;
    color: white;
  }
}
</style>

登录状态处理

需要处理未登录状态的页面展示，可添加条件渲染。

<template>
  <view v-if="!isLogin" class="login-tip">
    <text>您还未登录</text>
    <button @click="goLogin">去登录</button>
  </view>
  <view v-else>
    <!-- 已登录内容 -->
  </view>
</template>

性能优化

对于我的页面中的图片资源，建议使用懒加载和合适的CDN加速。

<image lazy-load :src="userInfo.avatar" mode="aspectFill"></image>

平台适配

不同平台可能需要特殊处理，如小程序和H5的差异。

onLoad() {
  // #ifdef H5
  this.initWebUser()
  // #endif
  // #ifdef MP-WEIXIN
  this.getWeixinUser()
  // #endif
}

安全考虑

用户敏感信息需要做好保护，避免直接显示完整手机号等。

computed: {
  safePhone() {
    return this.userInfo.phone.replace(/(\d{3})\d{4}(\d{4})/, '$1$2')
  }
}