導讀：

大廠程序員都是有KPI績效考核的，所以他們不能閑著，每天要想著怎么優化程序代碼、怎么滿足奇葩用戶的需求，所以苦逼了我們這些小公司程序員，微信一個小小的API接口改動，可能就讓一個小公司因此損失慘重，甚至直接面臨倒閉。鵝廠可不管你這些小公司的死活，畢竟他們又不缺用戶，我們只能含淚加班改功能了。

最近突然發現微信小程序的用戶全都是灰色頭像，昵稱全都是叫“微信用戶”，還以為服務器被黑客攻擊，植入了大量的機器人賬號，找半天問題才發現是微信小程序接口又改了，尼瑪，一個頭像和昵稱改來改去，鵝廠程序員都沒事干了嗎，就跟這頭像和昵稱過不去了？

?看微信官方的說法，意思就是不讓直接使用wx.getUserProfile和wx.getUserInfo接口獲取用戶信息了，需要用戶自已設置頭像和昵稱，然后你才可以使用。

解決方案：

一、參考微信官方推薦的頭像昵稱填寫 | 微信開放文檔，效果如下圖：

?1、點擊頭像，可以選擇微信當前的頭像，也可以自己上傳其他圖片作為頭像；

2、點擊昵稱輸入框，可以直接輸入昵稱，也可以選擇微信當前的昵稱

?

小程序頭像和昵稱填寫窗口代碼：

我這個是直接封裝成一個彈窗組件的，大家可以參考一下，后端代碼要自己寫。

后端需要實現以下接口：

• 頭像圖片上傳

• 保存頭像和昵稱到數據庫里

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="請輸入昵稱"/><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: '上傳頭像到服務器',})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);//后端返回圖片的訪問鏈接const { imageUrl } = data;//保存頭像圖片遠程服務器路徑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);//保存頭像和昵稱到數據庫中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示例，彈窗框組件也包含在里面了，自己參考：

https://download.csdn.net/download/qq15577969/87096658

總結

以上是生活随笔為你收集整理的修复微信小程序不能获取头像和昵称的bug，微信小程序新版头像昵称API使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。