微信小程序获取头像和昵称,头像圆角设置

在小程序中,用户的昵称和头像如果只是用来展示,而非用于其它用途,可以直接拿到进行展示:

1.只是用来展示

(1)wxml


  头像
      



姓名:



性别:

(2)wxss

.intro {
  margin: 30px;
  text-align: center;
}

.line1{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis; 
}

.open-data-userAvatarUrl {
  width: 160rpx;
  height: 160rpx;
  display: block;
  overflow: hidden;
  border-radius: 50%;
  margin: 40rpx auto;
}
.open-data-userNickName{
  max-width: 105rpx;
  display:block;
}

(3)效果

微信小程序获取头像和昵称,头像圆角设置_第1张图片

2.用于别的用途  (button按钮获取官方地址:官方)

(1)通过页面的按钮,用户授权,这些涉及用户隐私的信息,必须由用户授权,否则无法拿到;

(2)涉及授权的操作必须使用button;

3.说明:

(1)open-data标签不能直接给一个随便的ClassName,须要给一个open-data-classname(classname可以自己变通定义),来实现可以实现头像的倒圆角,如果用户名对长度有要求限制的话也可以通过这种方法来实现限制;

(2)对于有些需要通过用户授权的部分,必须通过按钮来实现,需要授权的参照官网

你可能感兴趣的:(微信小程序)