微信小程序个人界面代码
时间: 2023-06-12 22:07:13 浏览: 1001
以下是一个简单的微信小程序个人界面的代码示例:
```html
<view class="container">
<view class="header">
<image class="avatar" src="{{userInfo.avatarUrl}}"></image>
<view class="info">
<view class="name">{{userInfo.nickName}}</view>
<view class="desc">微信号:{{userInfo.weixinID}}</view>
</view>
</view>
<view class="menu">
<view class="item" bindtap="onTapItem">
<image class="icon" src="/images/icon1.png"></image>
<view class="text">我的订单</view>
</view>
<view class="item" bindtap="onTapItem">
<image class="icon" src="/images/icon2.png"></image>
<view class="text">我的收藏</view>
</view>
<view class="item" bindtap="onTapItem">
<image class="icon" src="/images/icon3.png"></image>
<view class="text">我的消息</view>
</view>
</view>
</view>
```
```css
.container {
background-color: #f5f5f5;
padding: 20rpx;
}
.header {
display: flex;
padding: 20rpx;
background-color: #ffffff;
border-radius: 10rpx;
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}
.avatar {
width: 80rpx;
height: 80rpx;
border-radius: 50%;
}
.info {
display: flex;
flex-direction: column;
justify-content: center;
margin-left: 20rpx;
}
.name {
font-size: 32rpx;
color: #333333;
}
.desc {
font-size: 24rpx;
color: #999999;
}
.menu {
display: flex;
flex-wrap: wrap;
margin-top: 20rpx;
background-color: #ffffff;
border-radius: 10rpx;
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}
.item {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: calc(100% / 3);
padding: 20rpx;
}
.icon {
width: 60rpx;
height: 60rpx;
margin-bottom: 10rpx;
}
.text {
font-size: 24rpx;
color: #333333;
}
```
该代码中,使用了`<view>`标签作为容器,包含了头像、个人信息和功能菜单三部分。头像和个人信息部分使用了`<image>`和`<view>`标签,利用`display: flex`和`justify-content: center`等CSS属性进行布局。功能菜单部分使用了循环遍历的方式,使用了`<view>`、`<image>`和`<text>`标签进行布局。整体使用了较为简单的CSS样式进行美化。