微信小程序獲取頭像昵稱問題解決
前言和傳統(tǒng)方法
微信小程序是一種基于微信開發(fā)平臺(tái)的輕應(yīng)用，用戶可以通過微信掃碼、搜索等方式進(jìn)入小程序并使用。在小程序中，獲取用戶昵稱和頭像是非常常見的需求，因?yàn)檫@些信息可以用來個(gè)性化展示內(nèi)容，提高用戶體驗(yàn)。以下是獲取用戶頭像昵稱的傳統(tǒng)方法：
-
在小程序中，可以通過調(diào)用微信提供的API獲取用戶信息。具體步驟如下：
(1) 在小程序的app.json文件中添加“scope.userInfo”權(quán)限，表示需要獲取用戶信息。
(2) 在小程序中使用wx.getUserInfo()方法獲取用戶信息。
(3) 獲取到用戶信息后，可以通過userInfo.nickName和userInfo.avatarUrl屬性獲取用戶昵稱和頭像。
代碼示例：
wx.getUserInfo({
success: function(res) {
var userInfo = res.userInfo
var nickName = userInfo.nickName
var avatarUrl = userInfo.avatarUrl
}
})
- 另外，如果只需要獲取用戶頭像，可以直接調(diào)用微信提供的wx.getUserProfile()方法。
(1) 在小程序的app.json文件中添加“scope.userProfile”權(quán)限，表示需要獲取用戶頭像。
(2) 在小程序中使用wx.getUserProfile()方法獲取用戶頭像。
(3) 獲取到用戶頭像后，可以通過userProfile.avatarUrl屬性獲取用戶頭像。
代碼示例：
wx.getUserProfile({
desc: '用于展示用戶頭像',
success: function(res) {
var userProfile = res.userInfo
var avatarUrl = userProfile.avatarUrl
}
})
問題描述
但如果我們現(xiàn)在再使用類似的方法時(shí)，往往無法得到自動(dòng)獲取用戶頭像昵稱的效果。微信小程序開發(fā)現(xiàn)已不支持使用wx.getUserProfile 接口獲取用戶頭像,同時(shí)也無法使用wx.getUserInfo 接口獲取用戶頭像和昵稱，因此在使用微信小程序獲取頭像昵稱時(shí)，可能出現(xiàn)模擬器中成功但真機(jī)調(diào)試無法獲取頭像昵稱的情況。
解決方案
- 頭像選擇：需要將 button 組件
open-type的值設(shè)置為chooseAvatar，當(dāng)用戶選擇需要使用的頭像之后，可以通過bindchooseavatar事件回調(diào)獲取到頭像信息的臨時(shí)路徑。
//js文件
// 用戶選擇頭像
onChooseAvatar(e) {
const {
avatarUrl
} = e.detail
console.log(avatarUrl);
this.setData({
['userInfo.avatarUrl']: avatarUrl,
})
},
<!-- wxml文件 -->
<button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
修改頭像
</button>
- 昵稱填寫：需要將 input 組件
type的值設(shè)置為nickname，當(dāng)用戶在此input進(jìn)行輸入時(shí)，鍵盤上方會(huì)展示微信昵稱。
//js文件
// 用戶修改昵稱
changeNickName(e) {
let name = e.detail.value;
if (name.length === 0) return;
this.setData({
['userInfo.nickName']: e.detail.value
})
},
<!-- wxml文件 -->
<input type="nickname" class="nick-name-input" placeholder="請(qǐng)輸入昵稱" bindblur="changeNickName"/>
實(shí)現(xiàn)效果
通過以上代碼示例，我們可以實(shí)現(xiàn)獲取微信小程序用戶的昵稱和頭像的功能。當(dāng)用戶進(jìn)入小程序后，程序會(huì)請(qǐng)求用戶授權(quán)，用戶同意授權(quán)后，即可獲取到用戶的信息。按照上述步驟修改代碼后，無法直接獲取到用戶的昵稱和頭像，但可以在用戶修改默認(rèn)頭像和昵稱時(shí)選擇使用自己的昵稱和頭像。
在小程序中，我們可以根據(jù)用戶的昵稱和頭像信息，實(shí)現(xiàn)個(gè)性化展示，比如在頁(yè)面頂部顯示用戶頭像，頁(yè)面中顯示用戶昵稱等等。這些個(gè)性化的展示方式可以提高用戶的體驗(yàn)，增強(qiáng)用戶對(duì)小程序的好感度。
如在WXSS文件中進(jìn)行如下設(shè)置：
.userinfo {
display: flex;
flex-direction: column;
align-items: center;
color: #aaa;
}
.userinfo-avatar {
overflow: hidden;
width: 128rpx;
height: 128rpx;
margin: 20rpx;
border-radius: 50%;
}
.avatar-wrapper{
margin: 10px 0;
}
.nick-name-input{
border: 1px solid #f1f1f1;
padding:5px;
}
文章來源：http://www.zghlxwxcb.cn/news/detail-466047.html
此外，由于小程序的用戶信息獲取需要用戶授權(quán)，因此我們需要在代碼中加入相應(yīng)的授權(quán)請(qǐng)求代碼，保障用戶隱私安全，提升小程序的信譽(yù)度。
具體的實(shí)現(xiàn)代碼以及小程序項(xiàng)目完整功能源碼：https://github.com/WYXNICK/The-evening-scenery-is-like-spring文章來源地址http://www.zghlxwxcb.cn/news/detail-466047.html
到了這里，關(guān)于微信小程序獲取用戶頭像昵稱的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
