写一个微信小程序用户信息界面

这里是一个简单的微信小程序用户信息界面的代码示例：

<view class="container">
  <view class="avatar">
    <image src="{{userInfo.avatarUrl}}"></image>
  </view>
  <view class="info">
    <view class="nickname">{{userInfo.nickName}}</view>
    <view class="gender">{{userInfo.gender === 1 ? '男' : '女'}}</view>
    <view class="city">{{userInfo.city}}</view>
  </view>
</view>

<style>
  .container {
    display: flex;
    align-items: center;
    padding: 20rpx;
  }
  .avatar {
    margin-right: 20rpx;
  }
  .avatar image {
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
  }
  .info {
    display: flex;
    flex-direction: column;
  }
  .nickname {
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 10rpx;
  }
  .gender {
    font-size: 28rpx;
    color: #999;
    margin-bottom: 10rpx;
  }
  .city {
    font-size: 28rpx;
    color: #999;
  }
</style>

需要先获取用户信息并将其存储在 `userInfo` 变量中。然后在页面中使用 `userInfo` 变量渲染用户信息。其中，头像使用 `image` 标签，昵称、性别、城市等文本信息使用 `view` 标签，并对样式进行简单的调整，以达到良好的显示效果。