最新微信小程序一鍵獲取真實微信頭像和昵稱方法

使用公開免費插件，快速實現獲取用戶頭像和昵稱，已附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;
}