uniapp开发微信小程序获取头像（使用头像和昵称填写能力）

一、描述

如果使用老版一点的弹起授权框进行授权获取头像和昵称的话，会由于基础库版本问题，显示不了，并且这个接口存在调整问题，不是很好搞！

具体可以看看这里：

小程序用户头像昵称获取规则调整公告 | 微信开放社区 (qq.com)

wx.getUserInfo这个api也是可以获取到真实的头像和昵称的，但是要调基础库。

目前，我暂时采用这种方式，并且这个方式在真机调试中可以正常使用，所以我就先采用了这种方式。

<u-popup v-model="show" border-radius="20" mode="bottom">

			<view class="popup-box">
				<view class="clsoe-box" @click="onclose">
					<image src="../../static/user/close.png" mode="" class="close-icon"></image>
				</view>
				<view class="wx">
					<view class="wx-input">
						<view class="">
							头像
						</view>
						<button type="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseavatar"
							class="btn">
							<image :src='avatarimg' class="wx-avatar"></image>
						</button>
					</view>
					<view class="wx-input">
						<view class="">
							昵称
						</view>
						<input type="nickname" class="usernickname" placeholder="请输入昵称" @blur="onblur" />
					</view>

				</view>
				<view class="done" @click="done()">
					确认
				</view>
			</view>
		</u-popup>

头像的关键代码：

<button type="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseavatar"
							class="btn">
							<image :src='avatarimg' class="wx-avatar"></image>
						</button>

onChooseavatar(e) {
				console.log("头像", e);
				this.avatarimg = e.detail.avatarUrl
			},

昵称的关键代码：

<input type="nickname" class="usernickname" placeholder="请输入昵称" @blur="onblur" />

onblur(e) {
				console.log("昵称", e);
				this.wxname = e.detail.value
			},

实际效果就是：