微信小程序获取微信头像和名称（微信小程序摸索第十二天）

先上图

.wxml文件

<!-- 获取微信头像和名字 -->
<view class="b1 float">
        <view class="head float">
          <open-data type="userAvatarUrl"></open-data>
        </view>
        <view class="name float">
          <open-data type="userNickName"></open-data>
        </view>
</view>

.wxss文件

page{
  background-color: rgb(255, 255, 255);
}
.b1{
  width:100%;
  height: 200rpx;
  margin-bottom: 40rpx;
  background-color: rgb(0, 197, 232);
  border-style: 6px solid #f5f5f5f5;
}
.head{
  overflow: hidden;
  border-radius: 60%;
  width: 160rpx;
  height: 160rpx;
  margin: 20rpx 10rpx;
}

.name{
  line-height: 60rpx;
  width: 60rpx;
  height: 40rpx;
  margin: 100rpx 30rpx;
  font-size: 30rpx;
}

.float{
  float: left;
}

获取微信头像和名称是固定用法，官方文档中还有其他的介绍，感兴趣的朋友可以去看一下。希望可以帮助到大家！希望大家多多支持我，后续会更新其他的小程序前端技术。