微信小程序16 展示用户的头像,昵称

通常我们需要展示一下用户的基础信息,比如头像和昵称。

微信小程序官方提供的 wx.getUserProfile和wx.getUserInfo在较新版本的小程序环境中已经不支持了,如果只是获取头像和昵称的话,可以用这个方法。

<open-data type="userAvatarUrl"></open-data> 获取头像

 <open-data type="userNickName"></open-data>获取昵称

<view class="bodyClass">
  <view class="userInfoClass">
    <view class="avatar">
        <open-data type="userAvatarUrl"></open-data>
      </view>
      <open-data type="userNickName"></open-data>
  </view>
</view>

 样式

.userInfoClass{
  display: flex;
  flex-direction: row;
  align-items: center;
  color:black;
}
.avatar {
  overflow: hidden;
  width: 30px;
  height: 30px;
  margin: 5px;
  border-radius: 5px;
}

效果如下,个人信息我就打码了。

 

posted @ 2023-08-09 10:16  luytest  阅读(324)  评论(0编辑  收藏  举报