微信小程序个人中心页面开发教程：头像、昵称、菜单设计

<view class='container'>
  <view class='header'>
    <image class='avatar' src='{{avatarUrl}}' mode='aspectFit'></image>
    <text class='nickname'>{{nickname}}</text>
  </view>
  <view class='menu'>
    <view class='menu-item' bindtap='invite'>
      <text class='menu-text'>群组邀请</text>
      <image class='menu-icon' src='../../images/invite.png'></image>
    </view>
    <view class='menu-item' bindtap='edit'>
      <text class='menu-text'>个人信息</text>
      <image class='menu-icon' src='../../images/edit.png'></image>
    </view>
    <view class='menu-item' bindtap='logout'>
      <text class='menu-text'>退出登录</text>
      <image class='menu-icon' src='../../images/logout.png'></image>
    </view>
  </view>
</view>
<style>
  .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
  }

  .header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
  }

  .avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
  }

  .nickname {
    font-size: 20px;
    margin-top: 10px;
  }

  .menu {
    width: 100%;
  }

  .menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    border-bottom: 1px solid #eee;
  }

  .menu-text {
    font-size: 16px;
  }

  .menu-icon {
    width: 20px;
    height: 20px;
  }
</style>
<script>
  Page({
    data: {
      avatarUrl: '',
      nickname: ''
    },

    onLoad: function() {
      // 获取用户头像和昵称等信息
      // ...

      this.setData({
        avatarUrl: 'https://xxx.com/xxx.png',
        nickname: '小明'
      })
    },

    invite: function() {
      // 跳转到群组邀请页面
      // ...
    },

    edit: function() {
      // 跳转到个人信息编辑页面
      // ...
    },

    logout: function() {
      // 退出登录
      // ...
    }
  })
</script>