微信小程序（总结二）：uniapp开发，获取微信用户头像、昵称（最新）_uniapp获取微信头像

目录

第一章 了解趋势

第二章 获取微信头像、昵称

2.1 头像选择

  2.2 昵称填写 

第三章 遇到的问题 

---

第一章 了解趋势

 总结一已经说明原因，微信小程序开发现已不支持使用wx.getUserProfile 接口获取用户头像,同时也无法使用wx.getUserInfo 接口获取用户头像和昵称，获取的信息都是灰色头像与'微信用户'的昵称

但是小程序目前支持我们上传头像时能直接使用微信头像以及昵称填写时直接使用微信昵称 

第二章 获取微信头像、昵称

2.1 头像选择

需要将 buttom 组件open-type的值设置为chooseAvatar，当用户选择需要使用的头像之后，可以通过 @chooseavatar 事件回调获取到头像信息的临时路径

• html部分——

<!-- 获取用户头像 -->
<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
	<image class="avatar" :src="avatarUrl" style="width: 100rpx;height: 100rpx;"></image>
</button>

• js部分——

data() {
	return {
		avatarUrl: 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0' // 默认赋值灰色 头像的路径
	}
},
methods: {
	onChooseAvatar(e) {
		console.log('微信头像信息', e)
        // 将数据赋值
		const { avatarUrl } = e.detail 
		this.avatarUrl = avatarUrl
	}
}

• 展示效果——  

  

 --选择成功

  

• 返回的数据——

   

  2.2 昵称填写 

需要将 input 组件type的值设置为nickname，当用户在input进行输入时，键盘上方会展示微信昵称。 

• html部分——

<input type="nickname" class="weui-input" placeholder="请输入昵称"/>

当我们点击之后会自动出昵称让我们选择直接输入，可以添加input的方法实现赋值，例如：

@blur="changeNickName"……

• 效果展示——

• 选择之后：

第三章 遇到的问题 

微信小程序（bug）：uni-app调用微信小程序接口报错Component “……“ does not have a method “onChooseAvatar“-CSDN博客