貴公網安備 52060202000214號
解決2022 年 10 月 25 日后，微信小程序前端用戶頭像昵稱獲取問題?。?！
眾所周知，微信小程序開發文檔更新那不是一般的快，開發者都來不及去適配
今天就來說說登錄這一塊到底改了哪些地方，以及怎么去適配
我們先來看看更改了哪些？
先放小程序登錄文檔這塊更新的公告：https://developers.weixin.qq.com/community/develop/doc/00022c683e8a80b29bed2142b56c01
大概的調整說明
大概意思是登錄api不會返回微信頭像跟昵稱了，現在默認返回灰色頭像以及"微信用戶"昵稱，需要開發者加一個編輯個人信息的頁面，需要注意的是最新更新"頭像昵稱填寫能力"基礎庫2.21.0版本一下不支持需要開發者向下兼容。官方給的登錄適配示例如下：
現在試試該怎么適配？
其實很簡單，上demo，demo首頁
<template>
<view>
<image :src="userInfo.avatarUrl" mode="aspectFill"></image>
<view>
<view>用戶信息</view>
<view>
<view style="max-width: 300rpx;white-space: nowrap;margin-bottom: 10rpx;">頭像：{{userInfo.avatarUrl}}</view>
<view>姓名：{{userInfo.nickName}}</view>
</view>
</view>
<view @click="tiInfo">
<icon :type="'info'" size="26" />
</view>
<!-- 最新版登錄方法 -->
<button v-if="canIUseGetUserProfile" type='primary' @click="getUserProfile">getUserProfile</button>
<!-- 老版本登錄方法 -->
<button v-else type='primary' open-type="getUserInfo" @getuserinfo="bindGetUserInfo">
getuserinfo</button>
</view>
</template>
<script>
export default {
data() {
return {
//用來判斷用哪個登錄
canIUseGetUserProfile: false,
userInfo: {
avatarUrl: '/static/logo.png',
nickName: '--',
}
}
},
onLoad() {
//如果手機支持最新版登錄就用新方法
if (uni.getUserProfile) {
this.canIUseGetUserProfile = true
}
},
onShow() {
if(uni.getStorageSync("userInfo")){
this.userInfo = uni.getStorageSync("userInfo")
}
},
methods: {
//老版登錄接口(不再彈出登錄彈框)
bindGetUserInfo(e) {
if (e.detail.userInfo) {
//業務邏輯
}
},
// 彈出登錄彈框(新版)
getUserProfile() {
//推薦使用wx.getUserProfile獲取用戶信息，開發者每次通過該接口獲取用戶個人信息 均需用戶確認
// 開發者妥善保管用戶快速填寫的頭像昵稱，避免重復彈窗
uni.getUserProfile({
desc: '用于獲取您的個人信息', // s聲明獲取用戶個人信息后的用途，后續會展示在彈窗中，請謹慎填寫
success: res => {
//業務邏輯
this.userInfo = res.userInfo
uni.setStorageSync("userInfo",this.userInfo)
}
})
},
//去完善用戶信息
tiInfo() {
uni.navigateTo({
url: "/pages/info/info"
})
}
}
}
</script>
<style scoped>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.avatar {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
border-radius: 50%;
}
.user-box {
display: flex;
flex-direction: column;
justify-content: center;
.title {
display: flex;
justify-content: center;
margin-bottom: 20rpx;
font-size: 36rpx
}
.info {
font-size: 30rpx;
color: #8f8f94;
margin-bottom: 10rpx;
}
}
}
.setting {
position: absolute;
top: 20rpx;
right: 20rpx;
}
</style>
demo 個人信息頁
<template>
<view>
<view>
<form @submit="formSubmit">
<view>
<text>頭像</text>
<!-- open-type="chooseAvatar"是最新加的屬性用于獲取微信頭像 @chooseavatar是獲取頭像的回調-->
<button open-type="chooseAvatar" @chooseavatar="bindchooseavatar">
<image :src="userInfo.avatarUrl" mode="aspectFill"></image>
</button>
</view>
<view>
<text>昵稱</text>
<!-- type="nickname"是最新加的屬性用于獲取微信昵稱 @nicknamereview是校驗昵稱是否違規-->
<input :value="userInfo.nickName" @nicknamereview="bindnicknamereview" name="nickName"
type="nickname" placeholder="請輸入昵稱">
</view>
<view class="" style="margin: 15rpx 0 40rpx 10rpx;color: #888;font-size: 26rpx;">昵稱限2~32個字符，一個漢字為2個字符
</view>
<button type="primary" form-type="submit">提交</button>
</form>
</view>
</view>
</template>
<script>
function 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
}
const version = wx.getAppBaseInfo().SDKVersion
export default {
data() {
return {
userInfo: {
avatarUrl: '/static/logo.png',
nickName: '',
}
}
},
onLoad() {
if (compareVersion(version, '2.21.0') >= 0) {
console.log(compareVersion(version, '2.21.0'),"當前2.21.0大于此版本");
} else {
// 如果希望用戶在最新版本的客戶端上體驗您的小程序，可以這樣子提示
wx.showModal({
title: '提示',
content: '當前微信版本過低，無法使用該功能，請升級到最新微信版本后重試。',
showCancel: false,
success: res=>{
if(res.confirm){
uni.navigateBack({
data: 1
})
}
}
})
}
if (uni.getStorageSync("userInfo")) {
this.userInfo = uni.getStorageSync("userInfo")
}
},
methods: {
//獲取昵稱回調
bindnicknamereview(e) {
console.log(e);
if (e.detail.pass) {
//處理邏輯
}
},
//獲取頭像回調
bindchooseavatar(e) {
console.log(e.detail.avatarUrl);
this.userInfo.avatarUrl = e.detail.avatarUrl
uni.setStorageSync("userInfo", this.userInfo)
},
//提交事件
formSubmit(e) {
this.userInfo.nickName = e.detail.value.nickName
if (this.userInfo && this.userInfo.avatarUrl && this.userInfo.nickName) {
console.log(this.userInfo, '用戶表單信息');
uni.setStorageSync("userInfo", this.userInfo)
uni.showToast({
icon: 'success',
duration: 1500,
title: '保存成功！'
})
} else {
uni.showToast({
icon: 'error',
duration: 1500,
title: '請填寫完整！'
})
}
}
}
}
</script>
<style scoped>
.content {
.info {
.item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20rpx 20rpx;
border-bottom: 1rpx solid #ebebeb;
height: 70rpx;
button {
margin: 0;
background: none;
padding: 0;
height: auto;
line-height: 1;
image {
width: 70rpx;
height: 70rpx;
border-radius: 50%;
}
}
button::after {
background: none !important;
border: 0;
}
button .button-hover {
background: none !important;
color: none;
}
.name {
width: 170rpx;
flex-flow: row-reverse;
}
}
}
.btn {
width: 80%;
border-radius: 60rpx;
}
}
</style>
免費注冊：https://www.50yun.top/col-reg/
