微信小程序获取用户头像(nickname)与昵称(avatar)全指南

前言

为了保护用户隐私，wx.getUserInfo、wx.getUserProfile都没法获取到用户头像和昵称了，只能通过设计用户主动选择/输入形式，操作非常麻烦，而且可能获取到的是非真实头像和昵称，失去了获取意义。很多小程序的业务功能需要微信头像和昵称实现一定的社交性质，或者方便用户相互间的识别，接下来给大家介绍一个实现方法，详细可靠。

标题效果展示

点击登录后，会自动跳转提示使用安全注册插件服务，点击允许使用，就可以获取到用户真实的微信头像和昵称了~

一、申请插件

1.进入小程序管理后台（微信公众平台登录），点击左下角菜单->账号设置

2、点击第三方设置->插件管理->添加插件

3、搜索《安全注册》，添加

至此，已完成插件的关联，下面可以在开发中使用了。

二、使用插件

1.Uniapp使用方法

（1）在manifest.json中引入插件（源码视图）：

 "mp-weixin" : {
        "appid" : "你的小程序appid",
        "plugins" : {
            "loginplugin" : {//这里引用了登录插件，复制此部分
                "version" : "latest",
                "provider" : "wxc7b7f914565de923"
            }
        },
        "setting" : {
            "urlCheck" : false
        },
        "usingComponents" : true,
        "permission" : {}
    },

（2）在具体的page页面使用插件（只有需要使用登录功能的页面才需要引用）：

举例：我的小程序设计时，在个人中心（pages/mine/mine）页面需要使用到用户登录功能，那么我就在这个页面需要使用这个插件。

{
	"path" : "pages/mine/mine",
	"style" : 
	{
		"navigationBarTitleText" : "个人中心",
		"enablePullDownRefresh": false,
		"mp-weixin":
		{
			"usingComponents": {
				"login": "plugin://loginplugin/login"
			}
		}
	}
}

（3）正式使用组件

<template>
	<view>
		<login class="login-modal" :modal="modal" @success="loginSuccess" @fail="loginFail" @cancel="loginCancel" v-show="login_show"></login>
		<view class="user-area">
			用户业务部分
		</view>
	</view>
</template>
 
 
<script>
	export default {
		data() {
			return {
				login_show: true, //控制登录提示是否显示
				modal://弹窗内容定义
				{
					title: '用户登录',  //弹窗标题内容
					content: '授权登录后，开始使用完整功能'  //弹窗提示内容
				}
			}
		},
		onShow() {
			
		},
		methods: {
			loginSuccess (res) {//登录成功回调
				console.log(res);
				this.login_show = false;//登录成功后，关闭登录弹窗
				
				let _Info = res.target.res;
				
                //_Info.avatarUrl：用户头像地址
                //_Info.nickName：用户昵称
 
                //用户可以将获取到的头像和地址存储到服务器保存，下次就不用再次登录了
				上传用户信息到服务器，并标记用户已登录
			},
			loginFail (res) {//登录失败回调
				console.log(res);
				this.login_show = false;
 
                //某些手机端会出现登录失败情况，针对这部分的用户，如果业务需要登录后才能使用，建议这里按照登录成功处理，否则该类用户无法进入登录状态
                上传用户信息（默认头像和昵称）到服务器，并标记用户已登录
			},
			loginCancel (res){//用户取消登录回调
				console.log(res);
				this.login_show = false;
			}
		}
	}
</script>
 
<style lang="less">
	.login-modal{
	    position: fixed;
	    top: 0;
	    z-index: 99999999;
	    width: 100%;
	    height: 100%;
	    background-color: #00000098;
	}
</style>

注意：极少用户反馈登录会出现失败情况，失败会执行loginFail回调函数，如果你的业务需要登录后才能正常使用，这里建议登录失败的直接认为用户登录成功操作，否则用户可能始终无法登录成功，导致丢失这部分用户（经验总结哦）。

2.微信开发者工具使用方法

（1）在app.json中引入插件：

{
  ....
  "plugins": {
    "loginplugin": {
      "version": "latest",
      "provider": "wxc7b7f914565de923"
    }
  },
  .....
}

（2）在具体的page页面使用插件（只有需要使用登录功能的页面才需要引用）：

举例：我的小程序设计时，在个人中心（pages/mine/mine）页面需要使用到用户登录功能，那么我就在mine.json文件中使用这个插件。

{
  "navigationBarTitleText": "个人中心",
  "enablePullDownRefresh": false,
  "usingComponents": {
    "login": "plugin://loginplugin/login"
  }
}

（3）正式使用组件

//mine.wxml
<view>
	<login class="login-modal" modal="{{modal}}" bind:success="loginSuccess" bind:fail="loginFail" bind:cancel="loginCancel" hidden="{{!login_show}}"></login>
	<view class="user-area">
		用户业务部分
	</view>
</view>
 
 
 
//mine.js
export default {
	data: function data() {
		return {
			login_show: true, //控制登录提示是否显示
			modal://弹窗内容定义
			{
				title: '用户登录',  //弹窗标题内容
				content: '授权登录后，开始使用完整功能'  //弹窗提示内容
			}
		};
	},
	onShow() {
			
	},
	methods: {
		loginSuccess: function loginSuccess(res) {//登录成功回调
			console.log(res);
			this.login_show = false;//登录成功后，关闭登录弹窗
				
			let _Info = res.target.res;
				
            //_Info.avatarUrl：用户头像地址
            //_Info.nickName：用户昵称
 
            //用户可以将获取到的头像和地址存储到服务器保存，下次就不用再次登录了
		    上传用户信息到服务器，并标记用户已登录
		},
		loginFail: function loginFail(res) {//登录失败回调
			console.log(res);
			this.login_show = false;
 
            //某些手机端会出现登录失败情况，针对这部分的用户，如果业务需要登录后才能使用，建议这里按照登录成功处理，否则该类用户无法进入登录状态
            上传用户信息（默认头像和昵称）到服务器，并标记用户已登录
		},
		loginCancel: function loginCancel(res){//用户取消登录回调
			console.log(res);
			this.login_show = false;
		}
	}
}
 
 
//mine.wxss
.login-modal{
	position: fixed;
	top: 0;
	z-index: 99999999;
	width: 100%;
	height: 100%;
	background-color: #00000098;
}

注意：极少用户反馈登录会出现失败情况，失败会执行loginFail回调函数，如果你的业务需要登录后才能正常使用，这里建议登录失败的直接认为用户登录成功操作，否则用户可能始终无法登录成功，导致丢失这部分用户（经验总结哦）。

总结

这样就可以获取到真实的微信用户头像和昵称了，使用虽然没有最开始微信的接口方便，但是比现在的方式方便多了。