前面我出過(guò)兩期博客關(guān)于小程序授權(quán)登錄,利用php實(shí)現(xiàn)一個(gè)簡(jiǎn)單的小程序授權(quán)登錄并存儲(chǔ)授權(quán)用戶信息到數(shù)據(jù)庫(kù)的完整流程。無(wú)奈，小程序官方又整幺蛾子了。wx.getUserInfo接口收回，wx.getUserProfile接口也不讓用。導(dǎo)致我的個(gè)人小程序：夢(mèng)緣? 的授權(quán)登錄得改。所以，這篇博客專門針對(duì)授權(quán)登錄中頭像昵稱的使用進(jìn)行說(shuō)明。內(nèi)附源碼

?1.問(wèn)題定位

? ? ? ?lz的小程序：夢(mèng)緣? ?技術(shù)棧是基于：php+uniapp+vant 寫(xiě)的，之前因?yàn)橥祽?#xff0c;沒(méi)寫(xiě)后臺(tái)管理，然后php用的也是tp5,沒(méi)有走管理框架，導(dǎo)致后端代碼不規(guī)范，后面就因?yàn)橐恍┨厥庠?#xff0c;就重構(gòu)了一下。然后也就理所當(dāng)然的遇到了，授權(quán)登錄頭像昵稱的問(wèn)題。

之前走的wx.getUserProfile，也能用，但是獲取的頭像都變成了灰色頭像，昵稱統(tǒng)一為微信用戶。作為強(qiáng)迫癥患者的我肯定是不允許的，所以，必須解決。但是之前的代碼我又不想刪，畢竟都是自己一行一行敲出來(lái)的，我更加偏向于加代碼。

這是之前授權(quán)登錄得代碼，直接調(diào)用wx.getUserProfile即可。

2.解決思路

? ? ? ? 前面提到過(guò)，之前的授權(quán)登錄代碼依舊是可以用的，只是頭像和昵稱統(tǒng)一是灰白色和微信用戶。再結(jié)合前面官方說(shuō)的，基礎(chǔ)版本庫(kù)的影響，基礎(chǔ)版本庫(kù)低于2.21.2，wx.getUserProfile返回的就是正常的頭像昵稱，高于2.21.2的話，就要使用昵稱頭像填寫(xiě)功能，把這兩個(gè)值作為參數(shù)傳遞給后端。

?既然如此，我之前的代碼就可以保留了，在傳參時(shí)額外增加nickname和avatar參數(shù)即可。后端針對(duì)是否有這兩個(gè)參數(shù)做針對(duì)性處理。而這兩個(gè)參數(shù)就需要前端利用小程序昵稱頭像的填寫(xiě)來(lái)獲取了。

3.源碼解析

下面直接公布授權(quán)登錄得代碼：login.vue

這里通過(guò)動(dòng)態(tài)的獲取當(dāng)前小程序基礎(chǔ)庫(kù)來(lái)決定是否調(diào)用微信的頭像昵稱填寫(xiě)功能。然后再統(tǒng)一調(diào)用授權(quán)登錄接口。后端根據(jù)動(dòng)態(tài)動(dòng)態(tài)保存。

<template><view><view><view class='header'><view class="userinfo-avatar"><open-data type="userAvatarUrl" lang="zh_CN" /></view></view><view class='content'><view>申請(qǐng)獲取以下權(quán)限</view><text>獲得你的公開(kāi)信息(昵稱，頭像等)</text></view><button class='bottom' type='primary' @click="login" v-if="ischeck" >授權(quán)登錄</button><button class='bottom' type='primary' @click="login_zheshow" v-else>授權(quán)登錄</button><btnlogin :zheshow='zheshow' v-if="zheshow" /></view></view>
</template><script>import btnlogin from '@/components/butlogin/butlogin';const context = require("../../context/ggyzContext.js");export default {data() {return {code:'',ischeck:true,zheshow:false,nickname:"",avatar:"",}},components:{btnlogin},onShow() {var that=this;wx.login({success(res) {console.log("code:",res.code);if (res.code) {that.code=res.code;} else {console.log('登錄失敗！' + res.errMsg)}}})var {SDKVersion} = wx.getSystemInfoSync()// 判斷是否支持getUserProfile()獲取頭像昵稱var compareRes = this.compareVersion(SDKVersion, "2.21.2");// 不支持if (compareRes !== -1) {console.log("不支持getUserProfile()獲取頭像")this.ischeck = false;return}// 支持console.log("支持getUserProfile()獲取頭像")},methods: {login_zheshow(){this.zheshow = true;},loset(Logon_Credentials){console.log(Logon_Credentials,'登錄信息');this.avatar=Logon_Credentials.active;this.nickname=Logon_Credentials.nickname;this.login();},close(){this.zheshow=false;},/*** 版本比較* v1 >= v2 返回 0或1 否則 -1* @param {String} v1* @param {String} v2 */compareVersion (v1, v2) {v1 = v1.split('.')v2 = v2.split('.')const len = Math.max(v1.length, v2.length)while (v1.length < len) {v1.push('0')}while (v2.length < len) {v2.push('0')}for (let i = 0; i < len; i++) {const num1 = parseInt(v1[i])const num2 = parseInt(v2[i])if (num1 > num2) {return 1} else if (num1 < num2) {return -1}}return 0},login(){var that=this;wx.getUserProfile({desc: '用于完善會(huì)員資料',success: e => {console.log("授權(quán)信息：",e);//發(fā)起網(wǎng)絡(luò)請(qǐng)求context.request({url: context.constant.url.login,method:'POST',data: {encryptedData: e.encryptedData,iv: e.iv,code: that.code,nickname:that.nickname,avatar:that.avatar},success(res) {console.log(res.data);if(res.data.code==1){uni.setStorageSync('userInfo',res.data.data);uni.setStorageSync('token',res.data.data.token);uni.setStorageSync('loginFlag',{expireTime:res.data.data.expiretime})uni.switchTab({url:'/pages/my/my'})}else{setTimeout( () => {uni.showToast({title: res.data.msg,icon: "none",});setTimeout( () =>{wx.hideToast();},2000)},0);}}})}})}}}
</script><style>page{background: #FFFFFF;}
.header {margin: 90rpx 90rpx 90rpx 50rpx;border-bottom: 1px solid #ccc;text-align: center;width: 650rpx;height: 300rpx;line-height: 450rpx;display: flex;justify-content: center;align-items: center;
}.header .userinfo-avatar {width: 200rpx;height: 200rpx;margin-bottom: 80rpx;
}.content {margin-left: 50rpx;margin-bottom: 90rpx;
}.content text {display: block;color: #9d9d9d;margin-top: 40rpx;
}.bottom {border-radius: 80rpx;margin: 70rpx 50rpx;font-size: 35rpx;
}
</style>

btnlogin.vue昵稱填寫(xiě)組件：

tips:這里用到了vant的彈窗，記得uni-app項(xiàng)目是否引入了該組件庫(kù)。別忘了在pages.json聲明引用

<template><view><van-popup  position="bottom"  :show="zheshow1" round><view class="zheshow" ><view class="cen_ter"><view class="box_At"><view class="box_At_text">獲取您的昵稱、頭像、手機(jī)號(hào)</view><view class="box_At_co">獲取用戶頭像、昵稱、手機(jī)號(hào)信息，主要用于完善個(gè)人資料，向用戶提供更好使用體驗(yàn)</view><view class="box_B" style="border-top:1px solid #f3f3f3 ;"><view class="acvter">頭像</view><button v-if="!active" class="acvter_all"  open-type="chooseAvatar" @chooseavatar="onChooseAvatar"><view class="mast">請(qǐng)選擇頭像</view></button><view v-if="active" class="img"><image :src="active" ></image></view></view><view class="box_B"><view class="acvter">昵稱</view><input class="acvter_all"  type="nickname" :value="nickname" @blur="bindblur" placeholder="請(qǐng)輸入昵稱" /></view><view class="Brn_S"><view class="btn_btns" @click="colse">取消</view><button  class="btn" @click="btns" style="background-color: #22ac38 !important;color: #ffffff !important;"><view class="btns">保存</view></button></view></view></view></view></van-popup></view>
</template><script>export default {props:['zheshow'],data() {return {on_zheshows:false,zheshow1:false,active:'',nickname:''}},mounted() {this.zheshow1=this.zheshow;},watch:{zheshow(zheshow,oldValue) {this.zheshow1=this.zheshow},},methods: {	colse(){console.log("取消")this.$parent.close();},onChooseAvatar(e) {let that = thisuni.getFileSystemManager().readFile({filePath: e.detail.avatarUrl, //選擇圖片返回的相對(duì)路徑encoding: "base64", success: (res) => {let base64s = "data:image/jpeg;base64," + res.datathat.active = base64s},fail: (res) => reject(res.errMsg),	                });},bindblur(e){this.nickname = e.detail.value},btns(e){if(this.active==''){uni.showToast({title:'請(qǐng)選擇上傳頭像',icon:'none'})return}if(this.nickname==''){uni.showToast({title:'請(qǐng)?zhí)顚?xiě)昵稱',icon:'none'})return}this.$parent.loset({nickname:this.nickname,active:this.active}) // 信息傳遞父組件中}}}
</script><style lang="scss" scoped>.zheshow{width: 100%;height: 100%;background-color: rgba(0,0,0,0.3);position: fixed;top: 0;left: 0;display: flex;align-items: center;align-items: flex-end;.mast{margin-top: 6rpx;}.Brn_S{width: 70%;height: 100rpx;display: flex;align-items: center;justify-content: space-between;margin: 10rpx auto;}.btn_btns{width: 300rpx;height: 80rpx;background: antiquewhite; display: flex;align-items: center;justify-content: center; border-radius: 10rpx; margin-right: 70rpx;background-color:  #fafafa;color: #39B54A;}.imgs{position: absolute;right: 6%;width: 32rpx;height: 32rpx;}.img{width: 90rpx;height: 90rpx;border-radius: 50%;margin-left: 80rpx;image{width: 100%;height: 100%;border-radius: 50%;}}.cen_ter{width: 100%;height: 600rpx;border-top-left-radius: 30rpx;border-top-right-radius: 30rpx;background-color: #FFFFFF;display: flex;align-items: center;justify-content: center;.box_At{width: 90%;height: 92%;margin-top: 20rpx;display: flex;flex-direction: column;.box_At_text{font-weight: bold;font-size: 30rpx}.box_At_co{font-size: 28rpx;color: #ababab;margin-top: 24rpx;}.box_B{width: 100%;height: 120rpx;border-bottom: 1px solid #f3f3f3;display: flex;align-items: center;margin-top: 12rpx;.acvter_all{font-size: 28rpx;color: #ababab;margin-left: 80rpx;}}.btn{width:300rpx;margin: 35rpx auto;height: 80rpx;display: flex;align-items: center;justify-content: center;background-color: #39B54A;color: #FFFFFF;border-radius: 10rpx;font-size: 30rpx;}}}}button {border-radius: 30rpx;height: 80rpx !important;padding-left: 0!important ;padding-right: 0!important ; background-color: rgba(0,0,0,0) !important;color: #ababab !important;font-family: PingFang SC !important;}button:after {top: 0;left: 0; border: 1px solid rgba(0,0,0,0) !important; -webkit-transform: scale(.5);transform: scale(.5); -webkit-transform-origin: 0 0; transform-origin: 0 0; box-sizing: border-box; border-radius: 10px;}	
</style>

組件效果：