wx.getUserProfile接口用于微信小程序獲取用戶信息,當頁面產生點擊事件(例如 button 上 bindtap 的回調中)后才可調用,每次請求都會彈出授權窗口,用戶同意后返回 userInfo。下面一起來看看具體的實現方法吧:
getUserInfo.js
Page({
data: {
userInfo: {},
hasUserInfo: false,
canIUseGetUserProfile: false,
},
onLoad() {
if (wx.getUserProfile) {
this.setData({
canIUseGetUserProfile: true
})
}
},
getUserProfile(e) {
// 推薦使用wx.getUserProfile獲取用戶信息,開發者每次通過該接口獲取用戶個人信息均需用戶確認
// 開發者妥善保管用戶快速填寫的頭像昵稱,避免重復彈窗
wx.getUserProfile({
desc: '用于完善會員資料', // 聲明獲取用戶個人信息后的用途,后續會展示在彈窗中,請謹慎填寫
success: (res) => {
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
console.log(res.userInfo)
}
})
},
getUserInfo(e) {
// 不推薦使用getUserInfo獲取用戶信息,預計自2021年4月13日起,getUserInfo將不再彈出彈窗,并直接返回匿名的用戶個人信息
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接口獲取用戶昵稱、頭像具體信息,小程序開發者可以參考官方文檔:https://developers.weixin.qq.com/miniprogram/dev/api/open-api/user-info/wx.getUserProfile.html