微信小程序獲取用戶頭像昵稱等信息
發布時間：2021-07-05 08:49 所屬欄目：小程序開發教程
調用微信小程序封住的 wx.getUserInfo({ })
微信新創建的項目中自帶獲取功能的代碼，但是代碼量太多，所以給簡化了一下方便以后在別的項目中使用
直接上代碼>>>
先在app.js中聲明一個全局變量userInfo
globalData: {
userInfo: null
}
|
在需要現顯示的wxml中
<view class="container">
<view class="userinfo">
<image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image> //頭像
<text class="userinfo-nickname">{{userInfo.nickName}}</text>//昵稱
</view>
</view>
|
在需要現顯示頁面的wxss中定義一下顯示的樣式
.userinfo {
display: flex;
flex-direction: column;
align-items: center;
}
.userinfo-avatar {
width: 128rpx;
height: 128rpx;
margin: 20rpx;
border-radius: 50%;
}
.userinfo-nickname {
color: #aaa;
}
|
在需要現顯示的js中
data: {
canIUse: wx.canIUse('button.open-type.getUserInfo')
}
onLoad: function () { //頁面加載監聽函數
wx.getUserInfo({
success: res => {
console.log(res) //獲取的用戶信息還有很多，都在res中，看打印結果
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
})
}
以上代碼就可實現微信小程序獲取用戶信息
注意：微信小程序獲取用戶信息需用戶授權，以上代碼是用戶已授權節省代碼量，若需授權請在app.js加入如下代碼：
onLaunch: function () {
// 登錄
wx.login({
success: res => {
// 發送 res.code 到后臺換取 openId, sessionKey, unionId
}
})
// 獲取用戶信息
wx.getSetting({
success: res => {
if (res.authSetting['scope.userInfo']) {
// 已經授權，可以直接調用 getUserInfo 獲取頭像昵稱，不會彈框
wx.getUserInfo({
success: res => {
// 可以將 res 發送給后臺解碼出 unionId
this.globalData.userInfo = res.userInfo
// 由于 getUserInfo 是網絡請求，可能會在 Page.onLoad 之后才返回
// 所以此處加入 callback 以防止這種情況
if (this.userInfoReadyCallback) {
this.userInfoReadyCallback(res)
}
}
})
}
}
})
},
|
