微信小程序 - 获取用户头像，昵称

一.  由于微信官方对获取用户信息wx.getUserProfile和wx.getUserInfo两个接口做了调整，现在已经没有办法通过这种方式获取用户信息了，详细调整情况见：小程序用户头像昵称获取规则调整公告 | 微信开放社区 (qq.com)

二. 自调整之后，新上线的小程序只能分开单独获取用户的头像，昵称（详细官方文档：开放能力 / 用户信息 / 获取头像昵称 (qq.com)）

        2.1 获取头像

       < HTML >

<template>
	<view class="content">
		<view class="container">
            // 获取用户头像, 需声明open-type="chooseAvatar"
            
            // uniapp写法
			<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
				<image class="avatar" :src="avatarUrl"></image>
			</button>
            
            // 微信开发者工具写法
            <button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
                <image class="avatar" src="{{avatarUrl}}"></image>
            </button> 
		</view>
	</view>
</template>

        < JS >

data() {
			return {
				avatarUrl: "https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0"
			}
		},
		onLoad() {
		},
        // uniapp写法
		methods: {
			// 获取用户头像
			onChooseAvatar(e) {
				const {
					avatarUrl
				} = e.detail
				this.avatarUrl = avatarUrl;
			},
		}
        
        // 微信开发者工具写法
        onChooseAvatar(e) {
				const {
					avatarUrl
				} = e.detail
				this.setData({
                    avatarUrl: avatarUrl
                })
			},

效果：        

        2.2 获取昵称

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

效果：