獲取微信頭像等信息
效果:
注意藐俺,你在css(wxss)里面直接設(shè)置button的width,height是無(wú)效的I鸵肌S愠础!必須在html(wxml)里面的style進(jìn)行設(shè)置r蚪琛N羟啤!
<view class="flex_horizontal_center">
<button class="getUserInfoBtn" style="width: 14vmin;height: 14vmin;" open-type="getUserInfo" bindgetuserinfo="didGetUserInfo" wx:if='{{!hasWeChatIcon}}'>
<image class="imageView" src='{{userIcon}}'></image>
</button>
<image class="imageViewOnly" src='{{userIcon}}' wx:if='{{hasWeChatIcon}}'></image>
<view class="info flex_vertical">
<text>{{userInfo.userName}}</text>
<text>{{userInfo.phone}}</text>
</view>
</view>
.getUserInfoBtn {
/* 骨望,button的寬高無(wú)法在wxss里面修改硬爆,必須在用style寫!!!*/
width: 14vmin;
height: 14vmin;
border-radius: 7vmin; // 本來(lái)不需要切圓角的,無(wú)奈button就算設(shè)置背景色為透明擎鸠,也還是有影子缀磕!
position: relative;
border: dashed 0 transparent;
background-color: transparent;
}
.imageView {
width: 14vmin;
height: 14vmin;
position: absolute;
top: 0;
left: 0; // 如果不設(shè)置left,會(huì)自動(dòng)向右偏移(因?yàn)楦敢晥D切了圓角)
border-radius: 7vmin;
}
.imageViewOnly {
width: 14vmin;
height: 14vmin;
border-radius: 7vmin;
}
.info {
margin-left: 8pt;
}