小程序设置用户信息时，获取微信头像和昵称

<template>
	<!-- 修改昵称头像 -->
	<view class="edit flex column align-items-center">
		<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
		  <image class="avatar" :src="avatar?avatar:defaultAvatarUrl"></image>
		</button> 
		<view class="nickname-box flex align-items-center">
			<text>昵称</text>
			<input type="nickname" class="weui-input" placeholder="请输入昵称" v-model="nickname" @blur="getnickname"/>
		</view>
		<view class="btn-box" @tap="submit">确定</view>
	</view>
</template>

<script>
	const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
	export default{
		data(){
			return{
				avatar:'',
				nickname:'',
				isloading:false
			}
		},
		methods:{
			onChooseAvatar(e) {
				console.log(e)
			    const { avatarUrl } = e.detail 
				this.uploadImg(avatarUrl)
			    // this.avatar = avatar
			},
			async uploadImg(url){
				let templ = ''
				await this.$http.uploadImg(url).then(res=>{
					templ = res.data.url
				})
				this.avatar = templ
			},
			getnickname(e){
				console.log(e)
			},
			submit(){
				uni.createSelectorQuery().in(this) // 注意这里要加上 in(this)  
				    .select(".weui-input")  
				    .fields({  
				        properties: ["value"],  
				    })  
				    .exec((res) => {  
				        this.nickname = res?.[0]?.value  
				        console.log('昵称', this.nickname)  
						if(this.isloading) return
						this.isloading = true
						this.$http.api.edit({avatar:this.avatar,nickname:this.nickname}).then(res=>{
							this.isloading = false
							uni.showToast({
								icon:"none",
								title:res.msg
							})
							if(res.status==200){
								setTimeout(()=>{
									this.goBack()
								},1000)
							}
						}).catch(err=>{
							this.isloading = false
						})
				})
				
			},
			getUserInfo() {
				this.$http.api.userInfo().then(res => {
					console.log(res,'========res')
					uni.setStorageSync('user', res.data.info);
					this.avatar = res.data.info.avatar;
					this.nickname = res.data.info.nickname;
				})
			}
		},
		onLoad() {
			this.getUserInfo()
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #fff;
	}
	.edit{
		padding-top: 50rpx;
	}
	.avatar-wrapper{
		width: 100rpx;
		height: 100rpx;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.nickname-box{
		width: 100vw;
		border-top: 1rpx solid #f8f8f8;
		border-bottom: 1rpx solid #f8f8f8;
		padding: 20rpx 30rpx;
		margin-top: 40rpx;
	}
	.weui-input{
		margin-left: 50rpx;
		// text-align: center;
	}
	.btn-box{
		background-color: #FFD14A;
		width: 690rpx;
		height: 90rpx;
		font-weight: 800;
		font-size: 30rpx;
		border-radius: 10rpx;
		text-align: center;
		line-height: 90rpx;
		margin-top: 50rpx;
	}
</style>

效果如图

 

使用onblur需要再次点击聚焦的时候才能获取到昵称