wx.getUserProfile接口用于微信小程序獲取用戶信息,當(dāng)頁(yè)面產(chǎn)生點(diǎn)擊事件(例如 button 上 bindtap 的回調(diào)中)后才可調(diào)用,每次請(qǐng)求都會(huì)彈出授權(quán)窗口,用戶同意后返回 userInfo。下面一起來(lái)看看具體的實(shí)現(xiàn)方法吧:
getUserInfo.js
Page({
data: {
userInfo: {},
hasUserInfo: false,
canIUseGetUserProfile: false,
},
onLoad() {
if (wx.getUserProfile) {
this.setData({
canIUseGetUserProfile: true
})
}
},
getUserProfile(e) {
// 推薦使用wx.getUserProfile獲取用戶信息,開發(fā)者每次通過該接口獲取用戶個(gè)人信息均需用戶確認(rèn)
// 開發(fā)者妥善保管用戶快速填寫的頭像昵稱,避免重復(fù)彈窗
wx.getUserProfile({
desc: '用于完善會(huì)員資料', // 聲明獲取用戶個(gè)人信息后的用途,后續(xù)會(huì)展示在彈窗中,請(qǐng)謹(jǐn)慎填寫
success: (res) => {
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
console.log(res.userInfo)
}
})
},
getUserInfo(e) {
// 不推薦使用getUserInfo獲取用戶信息,預(yù)計(jì)自2021年4月13日起,getUserInfo將不再?gòu)棾鰪棿?amp;#xff0c;并直接返回匿名的用戶個(gè)人信息
console.log(e.detail.userInfo)
this.setData({
userInfo: e.detail.userInfo,
hasUserInfo: true,
})
},
})
getUserInfo.wxml
<view class=”container”>
<view class=”userinfo”>
<block wx:if=”{{!hasUserInfo}}”>
<button wx:if=”{{canIUseGetUserProfile}}” bindtap=”getUserProfile”> 獲取頭像昵稱 </button>
<button wx:else open-type=”getUserInfo” bindgetuserinfo=”getUserInfo”> 獲取頭像昵稱 </button>
</block>
<block wx:else>
<image bindtap=”bindViewTap” class=”userinfo-avatar” src=”{{userInfo.avatarUrl}}” mode=”cover”></image>
<text class=”userinfo-nickname”>{{userInfo.nickName}}</text>
</block>
</view>
</view>
微信小程序wx.getUserProfile接口獲取用戶昵稱、頭像具體信息,小程序開發(fā)者可以參考官方文檔:https://developers.weixin.qq.com/miniprogram/dev/api/open-api/user-info/wx.getUserProfile.html