uniapp登录获取微信头像和昵称（头像昵称填写能力方法）

1、微信头像获取效果图

2、使用uniapp的头像昵称填写能力功能

<view>
    <button type="balanced" open-type="chooseAvatar" @chooseavatar="onChooseAvatar"style="width:150upx;height:150upx;padding:0;margin-top:100upx">
		<image :src="avatarUrl" style="width:150upx;height:150upx;"></image>
	</button>
    <view  style="border:1upx solid #DCDCDC;height:100upx;margin-top:50upx;display: flex;flex-direction: row;align-items: center;">
	    <text style="flex:1;padding-left:20upx;">昵称:</text>
	    <input type="nickname" class="weui-input" placeholder="请输入昵称" style="height:100%;flex:4" :value="userName"@blur="bindblur" />
    </view>
</view>

<script>
	export default {
		data() {
			return {
				userName: '',
				// 默认的灰色头像
				avatarUrl: 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0',
			}
		},
		methods: {
			// 获取及修改微信头像
			onChooseAvatar(e) {
				// console.log('个人头像信息', e)
				// 解构微信头像或者是相册中选中的微信头像,字符串形式
				const {
					avatarUrl
				} = e.detail
				// 更换微信头像
				this.avatarUrl = avatarUrl
			},
			// 获取昵称
			bindblur(e) {
				// console.log('个人昵称信息', e)
				this.userName = e.detail.value;
			},
		}
	}

3、但这里有一个bug，uniapp官方暂时未解决，当用户取消选择头像时会报渲染层错误。（但不影响功能实现）