贵公网安备 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/
