微信小程序获取用户界面
1.效果图
2.代码
wxml
<view class='amountBg'>
<view class='img'>
<open-data type="userAvatarUrl"></open-data>
</view>
<view class='account'>
<view class='nick-name'>
<open-data type="userNickName" lang="zh_CN"></open-data>
</view>
<view class='address'>
<open-data type="userCountry" lang="zh_CN"></open-data>·
<open-data type="userProvince" lang="zh_CN"></open-data>·
<open-data type="userCity" lang="zh_CN"></open-data>
</view>
</view>
</view>
wcss
/* pages/mine/mine.wxss */
.amountBg {
display: flex;
flex-direction: row;
height: 150px;
background-color: #4CCCCF;
align-items: center;
}
.img {
overflow: hidden;
display: block;
margin-left: 100px;
width: 80px;
height: 60px;
border-radius: 50%;
}
.account {
width: 70%;
color: #fff;
margin-left: 10px;
align-items: center;
}
.nick-name{
font-family: 'Mcrosoft Yahei';
font-size: 16px;
}