wxml:
<view class="userinfo"> <view class="userinfo-avatar"> <open-data type="userAvatarUrl"></open-data> </view> <open-data class='userinfo-nickname' type="userNickName"></open-data> </view>複製程式碼
wxss:
.userinfo { position: relative; width: 750rpx; height: 320rpx; color: #dadada; display: flex; flex-direction: column; align-items: center;}
.userinfo-avatar { overflow: hidden; display: block; width: 160rpx; height: 160rpx; margin: 20rpx; margin-top: 50rpx; border-radius: 50%; border: 2px solid #fff; box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);}複製程式碼
現有wx.login()方法一倍微信團隊出於某種目的,不建議使用,提供另外兩種方式獲取使用者資訊,
個人推薦使用open-data方式,第一種增加button按鈕無疑是增加了使用者無意識的操作,
具體open-data官方介紹如下圖: