微信小程序获取用户界面

微信小程序获取用户界面

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;
}