三种⼩程序获取⽤户头像昵称的⽅式
index.wxml
<view class="container">
为什么换不了头像<view class="userinfo">
<block wx:if="{{canIUseOpenData}}" calss="userinfo-opendata">
<view class="userinfo-avatar" bindtap="bindViewTap">
<open-data type="userAvatarUrl"></open-data>      <!-- 直接显⽰头像具体可参照官⽹组件open-data -->
</view>
<open-data type="userNickName"></open-data>    <!-- 直接显⽰昵称具体可参照官⽹组件open-data-->
</block>
<block>
<button bindtap="getUserProfile"> 获取头像昵称 </button>
<button open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称1 </button>
</block>
<block>
<image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</block>
</view>
</view>
idex.js
Page({
data: {
userInfo: {},
hasUserInfo: false,
canIUse: wx.canIUse('UserInfo'),
canIUseGetUserProfile: false,
canIUseOpenData: wx.canIUse('pe.userAvatarUrl') && wx.canIUse('pe.userNickName') // 如需尝试获取⽤户信息可改为false
},
// 事件处理函数
bindViewTap() {
wx.navigateTo({
url: '../logs/logs'
})
},
onLoad() {
if (wx.getUserProfile) {
this.setData({
canIUseGetUserProfile: true
})
}
},
getUserProfile(e) {
/
/ 推荐使⽤wx.getUserProfile获取⽤户信息，开发者每次通过该接⼝获取⽤户个⼈信息均需⽤户确认，开发者妥善保管⽤户快速填写的头像昵称，避免重复弹窗
desc: '展⽰⽤户信息', // 声明获取⽤户个⼈信息后的⽤途，后续会展⽰在弹窗中，请谨慎填写
success: (res) => {
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
})
},
getUserInfo(e) {
// 不推荐使⽤getUserInfo获取⽤户信息，⾃2021年4⽉13⽇起，getUserInfo将不再弹出弹窗，并直接返回匿名的⽤户个⼈信息
this.setData({
userInfo: e.detail.userInfo,
hasUserInfo: true
})
} })