uniapp我的 页面

### 创建或自定义 UniApp 的“我的页面”

在 UniApp 中创建或自定义“我的页面”，可以遵循标准的 Vue 组件结构并利用框架提供的特性来构建个性化界面。下面是一个详细的指南：

#### 页面布局

对于“我的页面”的 HTML 部分，采用 `<template>` 定义视图层的内容。这里展示了一个简单的例子，其中包含了头像、用户名以及一些功能按钮。

<template>
  <view class="my-page">
    <!-- 用户信息 -->
    <view class="user-info">
      <image :src="avatarUrl"></image> <!-- 头像 -->
      <text>{{ userName }}</text>       <!-- 昵称 -->
    </view>

    <!-- 功能列表 -->
    <view class="function-list">
      <navigator url="/pages/settings/settings">设置</navigator>
      <navigator url="/pages/help/help">帮助中心</navigator>
      <button @click="logout()">退出登录</button>
    </view>
  </view>
</template>

#### 脚本逻辑

脚本部分使用了 `Vue` 和 `uni-app` 提供的功能来进行数据绑定和事件处理。此段代码展示了如何初始化用户资料，并提供登出操作的方法。

<script setup>
import { ref, onMounted } from 'vue';
import { onLoad } from '@dcloudio/uni-app';

// 初始化变量
const avatarUrl = ref('https://example.com/avatar.png');
const userName = ref('默认昵称');

onLoad(() => {
  // 可在此处加载用户的实际信息
});

function logout() {
  uni.showModal({
    title: '提示',
    content: '确认要退出吗？',
    success(res) {
      if (res.confirm) {
        console.log('用户点击确定');
        // 执行登出逻辑...
      }
    },
  });
}
</script>

#### 样式设计

为了使页面看起来更美观，可以通过 SCSS 来编写样式表单，确保样式的局部作用域不会影响其他组件。

<style lang="scss" scoped>
.my-page {
  padding: 20px;
  
  .user-info {
    display: flex;
    align-items: center;

    image {
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
      margin-right: 10px;
    }

    text {
      font-size: 36rpx;
      color: #333;
    }
  }

  .function-list navigator,
  button {
    display: block;
    margin-top: 20px;
    background-color: #f7f7f7;
    padding: 10px;
    border-radius: 8px;
    text-align: center;
  }
}
</style>

上述代码片段提供了创建一个基本“我的页面”的方法[^1]。通过调整这些基础元素，可以根据具体需求进一步定制页面外观与行为。