最新微信小程序一键获取真实微信头像和昵称方法 - 教程

使用公开免费插件,快速实现获取用户头像和昵称,已附uniapp、微信开发工具开发详细教程。


前言

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

效果展示

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

一、申请插件

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

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

3、搜索《安全注册》或者《微注册》,添加

注:《安全注册》插件,只能更改对话框的标题和内容,对话框按钮“取消”“登录”无法自定义;《微注册》插件灵活性更高,除可自定义标题和内容,还可以自定义按钮的文字内容和颜色,以及按钮的背景颜色,可根据自己需要添加需要的插件。

4、使用插件的小程序需要增加服务类目 工具->办公(插件服务类目为 工具->办公),否则可能无法正常调用插件

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

二、使用插件

1.Uniapp使用方法

(1)在manifest.json中引入插件(源码视图):

    "mp-weixin" : {
        "appid" : "你的小程序appid",
        "plugins" : {
            "loginplugin" : {//这里引用了登录插件,复制此部分
                "version" : "latest",
                //以下二选一,微注册灵活性更高,小程序要先添加插件
                "provider" : "wxc7b7f914565de923"//插件:安全注册
                "provider" : "wx12251485dfaf24d3"//插件:微注册
            }
        },
        "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)正式使用组件


<script>
	export default {
		data() {
			return {
				login_show: true, //控制登录提示是否显示
				modal://弹窗内容定义
				{
					title: '用户登录',  //弹窗标题内容
					content: '授权登录后,开始使用完整功能',  //弹窗提示内容
                    //以下配置仅《微注册》插件支持
                    confirmText: '更新',  //确认按钮文字内容,非必填,默认“登录”,
                    cancelText: '暂不',  //取消按钮文字内容,非必填,默认“取消”
                    confirmStyle: {  //确认按钮文字颜色和按钮背景色,非必填
                        color: '#000000',    //文字颜色
                        backgroundColor: '#FFFFFF'   //背景颜色
                    },
                    cancelStyle: {  //取消按钮文字颜色和按钮背景色,非必填
                        color: 'red',     //文字颜色
                        backgroundColor: '#FFFFFF'   //背景颜色
                    }
				}
			}
		},
		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>

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

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

(1)在app.json中引入插件:

{
  ....
  "plugins": {
    "loginplugin": {
      "version": "latest",
      //以下二选一,微注册灵活性更高,小程序要先添加插件
      "provider" : "wxc7b7f914565de923"//插件:安全注册
      "provider" : "wx12251485dfaf24d3"//插件:微注册
    }
  },
  .....
}

(2)在具体的page页面使用插件(只有需要使用登录功能的页面才需要引用):

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

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

 (3)正式使用组件

//mine.wxml

	
	
		用户业务部分
	

//mine.js
export default {
	data: function data() {
		return {
			login_show: true, //控制登录提示是否显示
			modal://弹窗内容定义
			{
				title: '用户登录',  //弹窗标题内容
				content: '授权登录后,开始使用完整功能'  //弹窗提示内容
                //以下配置仅《微注册》插件支持
                confirmText: '更新',  //确认按钮文字内容,非必填,默认“登录”,
                cancelText: '暂不',  //取消按钮文字内容,非必填,默认“取消”
                confirmStyle: {  //确认按钮文字颜色和按钮背景色,非必填
                    color: '#000000',    //文字颜色
                    backgroundColor: '#FFFFFF'   //背景颜色
                },
                cancelStyle: {  //取消按钮文字颜色和按钮背景色,非必填
                    color: 'red',     //文字颜色
                    backgroundColor: '#FFFFFF'   //背景颜色
                }
			}
		};
	},
	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回调函数,如果你的业务需要登录后才能正常使用,这里建议登录失败的直接认为用户登录成功操作,否则用户可能始终无法登录成功,导致丢失这部分用户(经验总结哦)。

总结

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

提示:《安全注册》插件和《微登录》插件均为免费直接可用插件,部分用户可能会有开屏广告,介意慎用;

如有使用问题,欢迎添加qq:2352695728 交流,有空看到就回,欢迎转载,转载请注明出处。

---

知识拓展

以下资源可以帮助你进一步提升:

  1. Vue开发实战Vue.js实战开发指南
posted @ 2025-11-10 16:41  clnchanpin  阅读(2538)  评论(0)    收藏  举报