Small micro-channel program display rounded open-data userAvatarUrl

From the beginning, open the applet, the toolbar will pop up this reminder:

 

 

 That is, the default is not authorized to ask the pop-up box, default not obtain user information (picture, nickname, etc.)!

If you need to use this interface, you can try the following:

1, with a button component, open-type attribute name is set to getUserInfo type, to lift the authorization window to get basic user information, see the documentation button 

<Open Button-type = " getUserInfo " bindgetuserinfo = " onGotUserInfo " > authorized user information </ button>

2, directly, head and replaced as nicknames tag, see open-data documentation

<open-data type="userAvatarUrl"></open-data>
<open-data type="userNickName"></open-data>

This method Note:

• Set aspect, the need to add: display: block; 

· Set fillet invalid: border-radius: 50%; required together: overflow: hidden

 

For property border-radius: 50%, need to meet the overflow: hidden to use, complete code:

<view class='avatar'><open-data type="userAvatarUrl"></open-data></view>
 
.avatar{
  width: 100rpx;
  height: 100rpx;
  overflow:hidden;  
  border-radius: 50%; 
}

3, a method is provided fillet:

Using border-radius: 50% rounded head set, use clip-path: circle (50rpx at center); for trimming around the specific code examples are as follows:

<view class='avatar'><open-data type="userAvatarUrl"></open-data></view>
 
.avatar{
  width: 100rpx;
  height: 100rpx;
  clip-path: circle(50rpx at center);
}

Note:

1. open-data component depends applet foundation libraries lowest version number is 1.9.90

2. clip-path CSS properties can be tailored to the partial region of the element (hidden).