2024最新uniapp_微信小程序_微信授权登录获取微信头像和微信昵称

一、点击获取微信昵称

这个直接微信封好的当input type="nickname"你直接就可以获取了

代码

	<input type="nickname" class="userName" placeholder="请输入昵称" v-model="nameUser"
						@blur="bindblur"></input>
	bindblur(event) {
				this.nameUser = event.target.value;
				this.UploadWeChatName()
			},

这样就可以了，拿到值传给后端就可以了

二、点击获取微信头像

这个其实也简单，但是有一点，你拿到的是临时路径，你得使用uni.uploadFile转换公网上那种路径

代码

<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
					<image class="userImg" :src="imagUrl"></image>
				</button>






	onChooseAvatar(res) {
				const {
					detail
				} = res
				// 这是个临时路径
				this.imagUrl = detail.avatarUrl
				// 上传图片返回一个服务器路径
				uni.uploadFile({
					url: `${this.apiUrl}/tools/upload_ajax.ashx`,
					filePath: this.imagUrl,
					name: 'Filedata',
					formData: {
						openid: this.openid
					},
					success: (uploadFileRes) => {
						const data = JSON.parse(uploadFileRes.data);
						this.path = this.apiUrl + data.path;
						// 把服务器路径上传数据表
						this.UploadWeChatavatar(this.path)
						uni.showToast({
							title: '头像修改成功',
							duration: 2000
						});
					},
					fail(err) {
						console.log(err);
					}
				});

			},

 

点击就可以获取微信头像，使用这个uni.uploadFile，拿到一个图片路径，上传后端接口即可