導(dǎo)讀：
大廠程序員都是有KPI績(jī)效考核的，所以他們不能閑著，每天要想著怎么優(yōu)化程序代碼、怎么滿足奇葩用戶的需求，所以苦逼了我們這些小公司程序員，微信一個(gè)小小的API接口改動(dòng)，可能就讓一個(gè)小公司因此損失慘重，甚至直接面臨倒閉。鵝廠可不管你這些小公司的死活，畢竟他們又不缺用戶，我們只能含淚加班改功能了。
最近突然發(fā)現(xiàn)微信小程序的用戶全都是灰色頭像，昵稱全都是叫“微信用戶”，還以為服務(wù)器被黑客攻擊，植入了大量的機(jī)器人賬號(hào)，找半天問(wèn)題才發(fā)現(xiàn)是微信小程序接口又改了，尼瑪，一個(gè)頭像和昵稱改來(lái)改去，鵝廠程序員都沒(méi)事干了嗎，就跟這頭像和昵稱過(guò)不去了？
?看微信官方的說(shuō)法，意思就是不讓直接使用wx.getUserProfile和wx.getUserInfo接口獲取用戶信息了，需要用戶自已設(shè)置頭像和昵稱，然后你才可以使用。
解決方案：
一、參考微信官方推薦的頭像昵稱填寫(xiě) | 微信開(kāi)放文檔，效果如下圖：
?1、點(diǎn)擊頭像，可以選擇微信當(dāng)前的頭像，也可以自己上傳其他圖片作為頭像；
2、點(diǎn)擊昵稱輸入框，可以直接輸入昵稱，也可以選擇微信當(dāng)前的昵稱
?
小程序頭像和昵稱填寫(xiě)窗口代碼：
我這個(gè)是直接封裝成一個(gè)彈窗組件的，大家可以參考一下，后端代碼要自己寫(xiě)。
后端需要實(shí)現(xiàn)以下接口：
頭像圖片上傳
- 保存頭像和昵稱到數(shù)據(jù)庫(kù)里
1、index.wxml
<i-modal bind:cancel="close" scrollUp="{{false}}" visible="{{showpop}}">
<view class="mask"></view>
<view class="container">
<image class="bg" mode="widthFix" src="../../images/bg.png"></image>
<view class='text'>
<view class="title">自定義頭像和昵稱</view>
<button class="none-btn" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
<image class="avatar" src="{{avatarUrl}}" mode="aspectFill"></image>
</button>
<form bindsubmit="onSave">
<input type="nickname" name="nickname" maxlength="20" value="{{nickname}}" placeholder="請(qǐng)輸入昵稱"/>
<button form-type="submit" class="saveBtn">保存</button>
</form>
</view>
</view>
</i-modal>
2、index.wxss
/* mask layout */
.mask {
position: absolute;
top: 0;
width: 100%;
height: 100%;
opacity:0.8;
z-index: 2;
}
.container{
width: 80%;
display: flex;
position: relative;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: small;
}
.bg{
position: absolute;
width: 100%;
height: 100%;
}
.text{
position: absolute;
text-align: center;
z-index: 9999;
}
.title {
font-size: larger;
margin-bottom: 25rpx;
color:#fff;
font-size:36rpx;
}
.avatar {
width: 150rpx;
height: 150rpx;
border: 1rpx solid #ffffff;
border-radius: 50%;
}
input {
padding:10rpx 0px;
margin-bottom:30rpx;
width: 300rpx;
border: 1rpx solid #333;
text-align: center;
}
.saveBtn {
text-align: center;
border-radius: 10rpx;
color:#fff;
background: #F75451;
}
/*透明按鈕*/
.none-btn {
border: none;
background: none;
outline: none;
border-style: none;
margin: 0;
padding: 0;
}
.none-btn::after{
border: none;
}3、index.js
var app = getApp();
Component({
properties: {
showpop: {
type: Boolean,
value: false
},
avatarUrl: {
type: String,
value: ''
},
nickname: {
type: String,
value: ''
}
},
attached: function () {
},
data: {
},
methods: {
close: function () {
this.triggerEvent("cancel");
},
/**
* 更改頭像
*/
onChooseAvatar(e) {
var that = this;
const { avatarUrl } = e.detail
that.setData({
avatarUrl,
})
wx.showLoading({
title: '上傳頭像到服務(wù)器',
})
wx.uploadFile({
url: "后端上傳圖片的接口地址",
filePath: avatarUrl,
name: 'upfile',
formData: {
'name': avatarUrl
},
header: {
'content-type': 'multipart/form-data'
},
success: function (res) {
wx.hideLoading();
var data = JSON.parse(res.data);
//后端返回圖片的訪問(wèn)鏈接
const { imageUrl } = data;
//保存頭像圖片遠(yuǎn)程服務(wù)器路徑
that.setData({
avatarUrl:imageUrl,
})
}
})
},
onSave(e){
var that = this;
let nickname = e.detail.value.nickname.trim()
if(nickname==null || nickname==""){
wx.showToast({
title:"昵稱不能為空",
icon: 'error',
duration: 2000
})
return;
}
that.setData({
nickname,
})
console.log("頭像："+that.data.avatarUrl);
console.log("昵稱："+that.data.nickname);
//保存頭像和昵稱到數(shù)據(jù)庫(kù)中
app.util.request({
url: 'entry/wxapp/user',
data: {
controller: '后端保存頭像和昵稱的接口地址',
nickName: that.data.nickname,
avatarUrl: that.data.avatarUrl
},
dataType: 'json',
success: function(res) {
if(res.data.code==0) {
that.setData({
showpop : false
})
wx.showToast({
title: "保存成功",
icon: "success",
duration: 2000
});
}
}
})
}
}
});最后分享一下我的demo示例，彈窗框組件也包含在里面了，自己參考：文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-515883.html
https://download.csdn.net/download/qq15577969/87096658文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-515883.html
到了這里，關(guān)于修復(fù)微信小程序不能獲取頭像和昵稱的bug，微信小程序新版頭像昵稱API使用的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
