背景：最近在用uniapp寫微信小程序授權(quán)登錄的時候，發(fā)現(xiàn)項目在微信開發(fā)者工具中調(diào)試是正常的，但是在真機運行時，返回的用戶數(shù)據(jù)中昵稱變成了微信用戶，頭像變成了默認(rèn)的灰底頭像。接著去百度了一下發(fā)現(xiàn)出現(xiàn)這個問題的原因是getUserProfile接口被回收了，微信小程序基礎(chǔ)庫在2.27.1及以上版本的不再支持getUserProfile接口獲取用戶頭像昵稱了，改用頭像昵稱填寫的方式去獲取用戶頭像和昵稱信息。詳情可見官網(wǎng)
小程序用戶頭像昵稱獲取規(guī)則調(diào)整公告
頭像昵稱填寫
?所以就把項目中的微信登錄部分改成了2.27.1以下的版本還是用getUserProfile接口，2.27.1及以上的版本用頭像昵稱填寫能力。下面是通過頭像昵稱填寫能力獲取用戶頭像和昵稱的簡單實現(xiàn)（uniapp）。
wx-login-popup.vue文件
<template>
<view class="container" v-if="isVisible">
<!-- 標(biāo)題 -->
<view class="title">
<text>獲取昵稱頭像</text>
<text>未選擇頭像則為默認(rèn)頭像</text>
</view>
<!-- 選擇頭像 -->
<view class="choose-avatar-row">
<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
<image class="avatar" :src="avatarUrl"></image>
</button>
<text>點擊選擇頭像</text>
</view>
<!-- 選擇昵稱 -->
<view class="choose-nickname-row">
<text>昵稱</text>
<input v-model="nickName" @input="inputName" type="nickname" placeholder="請輸入昵稱" />
</view>
<!-- 按鈕 -->
<view class="login-row">
<button @click="close">關(guān)閉</button>
<button @click="submit" :class="{'inactive' : disabled}" :disabled="disabled">登錄</button>
</view>
</view>
</template>
<script>
export default {
name: "wx-login-popup",
data() {
return {
avatarUrl: 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0', // 默認(rèn)頭像
nickName: '',
// 控制登錄按鈕是否可用
disabled: false
};
},
props: {
isVisible: {
type: Boolean,
default: false
}
},
watch: {
// 只要昵稱填寫了就可以提交登錄
nickName(newVal) {
if (newVal) {
this.disabled = false
}
}
},
methods: {
// 選擇頭像事件
async onChooseAvatar(e) {
const {
avatarUrl
} = e.detail
// do something
// 我這邊是把文件上傳到云服務(wù)器
this.avatarUrl = await this.uploadFiles(avatarUrl, 'avatar')
},
// 上傳頭像圖片到云服務(wù)器
async uploadFiles(filePath, cloudPath) {
const res = await uniCloud.uploadFile({
cloudPath: cloudPath,
filePath: filePath
})
// 上傳成功后將圖片路徑返回出去
return res.fileID
},
// 昵稱輸入事件
inputName(e) {
const {
value
} = e.detail
// do something
},
// 關(guān)閉按鈕點擊事件
close() {
this.$emit('update:isVisible', false)
},
// 登錄按鈕點擊事件
submit() {
const userInfo = {
avatarUrl: this.avatarUrl,
nickName: this.nickName
}
this.$emit('submit', userInfo)
}
}
}
</script>
<style lang="scss">
view {
box-sizing: border-box;
}
.container {
width: 100%;
height: 45%;
position: absolute;
left: 0;
bottom: 0;
padding: 0 20px;
box-sizing: border-box;
display: flex;
flex-direction: column;
background-color: #fff;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
.title {
width: 100%;
height: 30%;
font-size: 20px;
font-weight: bold;
padding-top: 20px;
text:nth-child(2) {
display: block;
font-size: 14px;
font-weight: normal;
margin-top: 5px;
}
}
.choose-avatar-row,
.choose-nickname-row {
width: 100%;
height: 20%;
display: flex;
justify-content: flex-start;
align-items: center;
padding: 10px 2px;
font-size: 14px;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
.avatar-wrapper {
width: 40px;
height: 40px;
margin: 0;
padding: 0;
margin-right: 10px;
.avatar {
width: 100%;
height: 100%;
}
}
}
.choose-nickname-row {
border-top: none;
text {
width: 45px;
margin-right: 10px;
}
}
.login-row {
width: 100%;
height: 30%;
padding-top: 20px;
display: flex;
button {
font-size: 14px;
width: 30%;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-color: transparent;
color: #07c160;
}
.inactive {
color: #ccc;
}
}
}
</style>
使用：
login.vue頁面（記得導(dǎo)入組件，我這里用的是uniapp，有easycom所以沒有手動導(dǎo)入）
<!-- 微信登錄之填寫頭像昵稱信息 -->
<wx-login-popup :isVisible.sync="isLoginPopupVisible" @submit="submit"></wx-login-popup>需要傳遞控制彈框顯示與隱藏的值，接收該組件的登錄事件
<script>
export default {
data() {
return {
isLoginPopupVisible: false,
}
},
methods: {
// 接收填寫信息組件的登錄事件
submit(userInfo) {
// 登錄邏輯...
}
}
}
</script>效果如下：
?
?
?
其中還要注意一點，獲取昵稱在微信開發(fā)者工具中運行時是空值，但是在真機中測試是正常能獲取到微信昵稱的，可能跟我沒有做內(nèi)容安全檢測有關(guān)，如果友友們有興趣可以去官網(wǎng)了解一下~
另外：彈出框樣式借鑒的是這個博主的帖子文章來源：http://www.zghlxwxcb.cn/news/detail-504726.html
https://blog.csdn.net/qq_45737678/article/details/127898614?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522166921385016782388079221%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=166921385016782388079221&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduend~default-1-127898614-null-null.142^v66^control,201^v3^control_1,213^v2^t3_esquery_v2&utm_term=%E5%A4%B4%E5%83%8F%E6%98%B5%E7%A7%B0%E5%A1%AB%E5%86%99%E8%83%BD%E5%8A%9B&spm=1018.2226.3001.4187文章來源地址http://www.zghlxwxcb.cn/news/detail-504726.html
到了這里，關(guān)于微信小程序獲取用戶信息（getUserProfile接口回收后）——通過頭像昵稱填寫獲取用戶頭像和昵稱的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
