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

使用公开免费插件，快速实现获取用户头像和昵称，已附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）正式使用组件

<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: '授权登录后，开始使用完整功能',  //弹窗提示内容//以下配置仅《微注册》插件支持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><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"//插件：安全注册"provider" : "wx12251485dfaf24d3"//插件：微注册}},.....
}

（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" wx:if="{{login_show}}"></login><view class="user-area">用户业务部分</view>
</view>//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;
}