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')
}
}
