1.profile.json文件中添加相應的組件
```
{
"usingComponents": {
"van-button": "vant-weapp/button"
},
"navigationBarTitleText": "我的"
}
```
2.profile.wxss文件
```
/* pages/profile/profile.wxss */
.profile {
background: #E54847;
height: 400rpx;
text - align: center;
position: relative;
width: 100 % ;
}
.profile - img {
width: 200rpx;
height: 200rpx;
display: block;
overflow: hidden;
border - radius: 50 % ;
position: absolute;
left: 50 % ;
transform: translate( - 50 % , 60rpx);
}
.profile - name {
font - size: 36rpx;
color: #fff;
position: absolute;
left: 50 % ;
transform: translate( - 50 % , 270rpx);
}
```
profile .wxml文件
```
< !--pages / profile / profile.wxml--><view class = 'profile' > <view class = "profile-img" > <open - data type = "userAvatarUrl" > </open-data>
</view > <open - data type = "userNickName"class = "profile-name" > </open-data>
</view >
```
結果：
