????微信小程序登錄用戶頭像昵稱已經(jīng)不支持支持獲取,因?yàn)橛脩舻膕cope.userInfo權(quán)限已經(jīng)回收,可以使用昵稱頭像填寫進(jìn)行完善用戶信息，按照官方推薦會顯示用戶在微信的頭像和昵稱，本文介紹一下實(shí)現(xiàn)方案.最終實(shí)現(xiàn)效果:修改頭像會默認(rèn)顯示微信頭像,修改昵稱時會默認(rèn)顯示用戶的昵稱.


????實(shí)現(xiàn)代碼:

<template>
	<view class="content">
		<image class="user_img" :src="userImg"></image>
		<view class="text-area">
			<button type="default" open-type="chooseAvatar" @chooseavatar="getUserImg">更改用戶微信頭像</button>
		</view>
		<view class="nick_class">
			<text class="title">昵稱:</text>
			<input type="nickname" class="weui-input" placeholder="請輸入昵稱"/>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userImg:"../../static/logo.png"
			}
		},
		onLoad() {

		},
		methods: {
			wxLogin(){
				wx.login({
				  success (res) {
				    if (res.code) {
				      //發(fā)起網(wǎng)絡(luò)請求
				     console.log("登錄成功返回信息"+JSON.stringify(res))
				    } else {
				      console.log('登錄失?。? + res.errMsg)
				    }
				  }
				})
			},
			decryptPhoneNumber(res){
				console.log(res)
			},
			getUserInfo(){
				wx.getUserInfo({
				  success: function(res) {
				  console.log("授權(quán)返回的用戶信息:"+JSON.stringify(res))
				  }
				})
			},
			getUserImg(res){
				console.log("獲取用戶頭像:"+JSON.stringify(res.detail.avatarUrl)),
				uni.uploadFile({
					url: 'http://127.0.0.1:8080/aliyun/uploadImg', //僅為示例，非真實(shí)的接口地址
					filePath: res.detail.avatarUrl,
					name: 'multipartFile',
					formData: {
						'user': 'test'
					},
					success: (uploadFileRes) => {
						console.log("上傳返回信息:"+JSON.stringify(uploadFileRes.data))
						let responseInfo=JSON.parse(uploadFileRes.data)
						if(responseInfo.code == 200){
							this.userImg=responseInfo.data,
							console.log("圖片上傳地址:"+this.userImg)
						}else{
							uni.showToast({
								title:"圖片上傳失敗,請重試!",
								duration:3000
							})
						}
						
					}
				});
				// 上傳圖片
				// uni.chooseImage({
				// 	success: (chooseImageRes) => {
				// 		const tempFilePaths = chooseImageRes.tempFilePaths;
				// 		console.log("微信選擇頭像信息:"+tempFilePaths)
						
				// 	}
				// });
			},
			// 獲取用戶微信運(yùn)動步數(shù)
			getRunData(){
				wx.getWeRunData({
				  success (res) {
					  console.log("獲取運(yùn)動信息:"+JSON.stringify(res))
				    // 拿 encryptedData 到開發(fā)者后臺解密開放數(shù)據(jù)
				    const encryptedData = res.encryptedData
				    // 或拿 cloudID 通過云調(diào)用直接獲取開放數(shù)據(jù)
				    // const cloudID = res.cloudID
				  }
				})
				
			}
			
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		
	}

	.user_img {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
	.nick_class{
		display: flex;
		flex-direction: row;
	}
</style>

????補(bǔ)充:上面更換頭像時需要點(diǎn)擊按鈕,但是有的場景中需要直接點(diǎn)擊圖片進(jìn)行更換圖片,但是open-type="chooseAvatar"只能放到button按鈕上,這里將一下實(shí)現(xiàn)方案,簡單的辦法就是用button包裹住image,需要處理的問題是如何將按鈕背景置為透明,可以使用plain屬性,另外需要去除邊框,設(shè)置border-color:white即可.相關(guān)內(nèi)容如下:

<button  open-type="chooseAvatar" plain="true" style="border-color:white;">
		<image :src="fromdata.userImg"  click="chooseImg()"></image>
</button>

????幫朋友推薦一個好玩的小程序,有興趣可以看一下:

????參考內(nèi)容:
用戶信息接口調(diào)整說明,官方頭像昵稱填寫規(guī)范文章來源地址http://www.zghlxwxcb.cn/news/detail-516044.html

到了這里，關(guān)于微信小程序如何獲取用戶頭像昵稱的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！