使用公开插件，快速实现获取用户头像和昵称，已附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>
<!--对话框形式demo-->
<view class="login-modal">
<login :modal="modal1" @success="loginSuccess" @fail="loginFail" @cancel="loginCancel" v-show="login_show"></login>
</view>
<!--按钮形式demo-->
<view class="login-button">
<login :modal="modal2" @success="loginSuccess" @fail="loginFail" @cancel="loginCancel"></login>
</view>
<view class="user-area">
用户业务部分
</view>
</view>
</template>
<script>
export default {
data() {
return {
login_show: true, //控制登录提示是否显示
modal1://对话框模式
{
type: 0, //对话框模式
canIUse: wx.canIUse('functional-page-navigator'), //新增微信版本兼容设计
title: '用户登录', //弹窗标题内容
content: '授权登录后，开始使用完整功能', //弹窗提示内容
confirmText: '登录', //非必填，默认“登录”,
cancelText: '取消', //非必填，默认“取消”
confirmStyle: { //非必填
color: 'rgb(58, 89, 129)',
backgroundColor: '#00000000'
},
cancelStyle: { //非必填
color: 'black',
backgroundColor: '#00000000'
}
},
modal2://按钮模式
{
type: 1, //按钮模式
canIUse: wx.canIUse('functional-page-navigator'), //新增微信版本兼容设计
//以下type==1时有效：按钮模式
buttonText: '授权登录',
buttonStyle: {//非必填
width: '360rpx',
height: '80rpx',
color: 'white',
backgroundColor: 'rgb(26, 173, 25)',
padding: '0rpx 0rpx',
radius: '40rpx',
fontWeight: 'bold',
fontSize: '32rpx'
}
}
}
},
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;
let _Info = res.target.res;
//_Info.avatarUrl：灰色用户头像
//_Info.nickName：微信用户
//某些手机端会出现登录失败情况，针对这部分的用户，如果业务需要登录后才能使用，建议这里按照登录成功处理，否则该类用户无法进入登录状态
上传用户信息（默认头像和昵称）到服务器，并标记用户已登录
},
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;
}
.login-button{
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
}
</style>
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
//mine.wxml
<view>
<!--对话框形式demo-->
<view class="login-modal">
<login modal="{{modal1}}" bind:success="loginSuccess" bind:fail="loginFail" bind:cancel="loginCancel" wx:if="{{login_show}}"></login>
</view>
<!--按钮形式demo-->
<view class="login-button">
<login modal="{{modal2}}" bind:success="loginSuccess" bind:fail="loginFail" bind:cancel="loginCancel"></login>
</view>
<view class="user-area">
用户业务部分
</view>
</view>
mine.js
//mine.js
Page({
data: {
login_show: true, //控制登录对话框是否显示
modal1://对话框模式
{
canIUse: wx.canIUse('functional-page-navigator'), //新增微信版本兼容设计
title: '用户登录', //弹窗标题内容
content: '授权登录后，开始使用完整功能', //弹窗提示内容
confirmText: '更新', //非必填，默认“登录”,
cancelText: '暂不', //非必填，默认“取消”
confirmStyle: { //非必填
color: '#000000', //文字颜色
backgroundColor: '#FFFFFF' //背景颜色
},
cancelStyle: { //非必填
color: 'red', //文字颜色
backgroundColor: '#FFFFFF' //背景颜色
}
},
modal2://按钮模式：仅《微注册》插件支持
{
type: 1, //按钮模式
canIUse: wx.canIUse('functional-page-navigator'), //新增微信版本兼容设计
//以下type==1时有效：按钮模式
buttonText: '授权登录',
buttonStyle: {//非必填
width: '360rpx',
height: '80rpx',
color: 'white',
backgroundColor: 'rgb(26, 173, 25)',
padding: '0rpx 0rpx',
radius: '40rpx',
fontWeight: 'bold',
fontSize: '32rpx'
}
}
},
loginSuccess: function loginSuccess(res) {//登录成功回调
console.log(res);
//登录成功后，关闭登录弹窗
this.setData({
login_show: false
})
let _Info = res.target.res;
//_Info.avatarUrl：用户头像地址
//_Info.nickName：用户昵称
//用户可以将获取到的头像和地址存储到服务器保存，下次就不用再次登录了
//上传用户信息到服务器，并标记用户已登录
},
loginFail: function loginFail(res) {//登录失败回调
console.log(res);
this.setData({
login_show: false
})
let _Info = res.target.res;
//_Info.avatarUrl：用户头像地址
//_Info.nickName：用户昵称
//某些手机端会出现登录失败情况，针对这部分的用户，如果业务需要登录后才能使用，建议这里按照登录成功处理，否则该类用户无法进入登录状态
//上传用户信息（默认头像和昵称）到服务器，并标记用户已登录
},
loginCancel: function loginCancel(res){//用户取消登录回调
console.log(res);
this.setData({
login_show: false
})
}
})
mine.wxss
page {
height: 100vh;
display: flex;
flex-direction: column;
}
.login-modal{
position: fixed;
top: 0;
z-index: 99999999;
width: 100%;
height: 100%;
background-color: #00000098;
}
.login-button{
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
}
总结
这样就可以获取到真实的微信用户头像和昵称了，使用虽然没有最开始微信的接口方便，但是比现在的方式方便多了。
提示：《安全注册》插件和《微注册》插件均为申请直接可用插件；
如有使用问题，欢迎添加qq：2352695728 交流，有空看到就回，欢迎转载，转载请注明出处。
扫一扫
307
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
