设计一个微信小程序个人主页列表界面给出代码

以下是一个简单的微信小程序个人主页列表界面的代码示例：

// index.wxml

<view class="container">
  <view class="header">
    <image class="avatar" src="{{userInfo.avatarUrl}}" mode="aspectFill"></image>
    <view class="nickname">{{userInfo.nickName}}</view>
  </view>
  <view class="list">
    <block wx:for="{{menuList}}" wx:key="{{item.id}}">
      <view class="item">
        <image class="icon" src="{{item.icon}}"></image>
        <view class="title">{{item.title}}</view>
        <image class="arrow" src="arrow.png"></image>
      </view>
    </block>
  </view>
</view>


// index.wxss

.container {
  padding: 20rpx;
}

.header {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

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

.nickname {
  font-size: 28rpx;
  color: #000;
}

.list {
  background-color: #FFF;
  border-radius: 10rpx;
  box-shadow: 0 2rpx 5rpx rgba(0, 0, 0, 0.1);
}

.item {
  display: flex;
  align-items: center;
  padding: 20rpx;
  border-bottom: 1rpx solid #EEE;
}

.icon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 20rpx;
}

.title {
  font-size: 28rpx;
  color: #000;
}

.arrow {
  width: 20rpx;
  height: 20rpx;
  margin-left: auto;
}


// index.js

Page({
  data: {
    userInfo: {},
    menuList: [
      {
        id: 1,
        icon: "menu1.png",
        title: "菜单项1"
      },
      {
        id: 2,
        icon: "menu2.png",
        title: "菜单项2"
      },
      {
        id: 3,
        icon: "menu3.png",
        title: "菜单项3"
      }
    ]
  },
  onLoad: function () {
    // 获取用户信息
    wx.getUserInfo({
      success: (res) => {
        this.setData({
          userInfo: res.userInfo
        })
      }
    })
  }
})

在上述代码中，使用了wx:for指令来遍历menuList数组，并通过数据绑定将其中的图标、标题等信息展示在页面上。同时，通过调用wx.getUserInfo方法获取用户信息，并在页面中展示用户头像和昵称。