小程序文档中提出的调整说明
调整说明:
自 2022 年 10 月 25 日 24 时后(以下统称 “生效期” ),用户头像昵称获取规则将进行如下调整:
自生效期起,小程序 wx.getUserProfile 接口将被收回:生效期后发布的小程序新版本,通过 wx.getUserProfile 接口获取用户头像将统一返回默认灰色头像,昵称将统一返回 “微信用户”。生效期前发布的小程序版本不受影响,但如果要进行版本更新则需要进行适配。
自生效期起,插件通过 wx.getUserInfo 接口获取用户昵称头像将被收回:生效期后发布的插件新版本,通过 wx.getUserInfo 接口获取用户头像将统一返回默认灰色头像,昵称将统一返回 “微信用户”。生效期前发布的插件版本不受影响,但如果要进行版本更新则需要进行适配。通过 wx.login 与 wx.getUserInfo 接口获取 openId、unionId 能力不受影响。
「头像昵称填写能力」支持获取用户头像昵称:如业务需获取用户头像昵称,可以使用「头像昵称填写能力」(基础库 2.21.2 版本开始支持),具体实践可见下方《最佳实践》。
小程序 wx.getUserProfile 与插件 wx.getUserInfo 接口兼容基础库 2.21.2 以下版本的头像昵称获取需求:上述「头像昵称填写能力」从基础库 2.21.2 版本开始支持(覆盖微信 8.0.16 以上版本)。对于来自更低版本的基础库与微信客户端的访问,小程序通过 wx.getUserProfile 接口将正常返回用户头像昵称,插件通过 wx.getUserInfo 接口将返回用户头像昵称,开发者可继续使用以上能力做向下兼容。
对于上述 3,wx.getUserProfile 接口、wx.getUserInfo 接口、头像昵称填写能力的基础库版本支持能力详细对比见下表:
*针对低版本基础库,兼容处理可参考 兼容文档
请已使用 wx.getUserProfile 接口的小程序开发者和已使用 wx.getUserInfo 接口的插件开发者尽快适配。小游戏不受本次调整影响。
对于此次调整现将小程序授权方式做以调整
添加判断当前基础库是否支持头像昵称填写能力
在根目录App.vue中加入判断基础库是否大于2.21.2版本(大于此版本支持头像/昵称填写能力)
···// #ifdef MP
const version = uni.getSystemInfoSync().SDKVersion
if (Routine.compareVersion(version, '2.21.3') >= 0) {
console.log(version)
that.$Cache.set('MP_VERSION_ISNEW', true)
} else {
that.$Cache.set('MP_VERSION_ISNEW', false)
}// #endif
2.修改/pages/users/wechat_login.vue文件
(1) 在data中加入基础库判断,决定授权逻辑
mp_is_new: this.$Cache.get('MP_VERSION_ISNEW') || false
(2) dom中新增逻辑判断,对基础库版本进行判断,调用不同的方法
<!-- #ifdef MP -->
<button hover-class="none" v-if="mp_is_new" @tap="userLogin"
class="bg-green btn1">{{$t(`微信登录`)}}</button>
<button v-else-if="canUseGetUserProfile && code" hover-class="none" @tap="getUserProfile"
class="bg-green btn1">{{$t(`微信登录`)}}</button>
<button v-else hover-class="none" open-type="getUserInfo" @getuserinfo="setUserInfo"
class="bg-green btn1">{{$t(`微信登录`)}}</button><!-- #endif -->
(3)methods中加入方法userLogin
// 小程序 22.11.8日删除getUserProfile 接口获取用户昵称头像userLogin() {
Routine.getCode()
.then(code => {
uni.showLoading({
title: this.$t(`正在登录中`)
});
authLogin({
code,
spread_spid: app.globalData.spid,
spread_code: app.globalData.code
}).then(res => {
if (res.data.key !== undefined && res.data.key) {
uni.hideLoading();
this.authKey = res.data.key;
this.isPhoneBox = true;
} else {
uni.hideLoading();
let time = res.data.expires_time - this.$Cache.time();
this.$store.commit('LOGIN', {
token: res.data.token,
time: time
});
this.getUserInfo()
}
})
})
.catch(err => {
console.log(err)
});
},
3.新增用户头像/昵称获取能力
(1)调整pages/users/user_info.vue文件
data中新增 mp_is_new: this.$Cache.get('MP_VERSION_ISNEW') || false
(2)调整dom中
<view class='item acea-row row-between-wrapper'>
<view>{{$t(`头像`)}}</view>
<view class="avatar-box" v-if="!mp_is_new" @click.stop='uploadpic'>
<image :src="userInfo.avatar"></image>
</view>
<button v-else class="avatar-box" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
<image :src="userInfo.avatar"></image>
</button></view><view class='item acea-row row-between-wrapper'>
<view>{{$t(`昵称`)}}</view>
<view class='input'><input type='nickname' name='nickname' :value='userInfo.nickname'></input>
</view></view>
(3)methods中加入方法,获取当前微信用户的头像,并上传至服务器。
onChooseAvatar(e) {
const {
avatarUrl
} = e.detail
this.$util.uploadImgs('upload/image', avatarUrl, (res) => {
this.userInfo.avatar = res.data.url
}, (err) => {
console.log(err)
})
},
这里有一个公共方法uploadImgs需要在/utils/util.js中添加
uploadImgs(uploadUrl, filePath, successCallback, errorCallback) {
let that = this;
uni.uploadFile({
url: HTTP_REQUEST_URL + '/api/' + uploadUrl,
filePath: filePath,
fileType: 'image',
name: 'pics',
formData: {
'filename': 'pics'
},
header: {
// #ifdef MP
"Content-Type": "multipart/form-data",
// #endif
[TOKENNAME]: 'Bearer ' + store.state.app.token
},
success: (res) => {
uni.hideLoading();
if (res.statusCode == 403) {
that.Tips({
title: res.data
});
} else {
let data = res.data ? JSON.parse(res.data) : {};
if (data.status == 200) {
successCallback && successCallback(data)
} else {
errorCallback && errorCallback(data);
that.Tips({
title: data.msg
});
}
}
},
fail: (err) => {
uni.hideLoading();
that.Tips({
title: i18n.t(`上传图片失败`)
});
}
})
},
以上就是CRMEB本次分享调整的所有内容了!有不懂的地方可以在下方留言
所以现在可以让用户还没有体验就先填写昵称和头像了嘛?
经过排查发现,前端调试器无论新用户还是老用户都能正常登录,辗转费了几个号,再测线上版本,的确新用户是无法登录的,
后面经过查询发现wx.getUserProfile()在2.21.2版本一下支持,以后就无法正常获取用户头像昵称,
经过一系列的对比搜索:
1.【用户隐私引导】发现可能是小程序后台“用户隐私引导”未设置获取用户头像导致
2.【前端登录逻辑处理】为了保险起见,于是我在前端代码里做了一些逻辑修改,通过判断基础库版本,然后选择不同方式获取用户昵称头像,这样经过测试,的确完美解决!
片段代码:
其中compareVersion方法:
/** * *这段代码是一个用于比较版本号的函数compareVersion(v1, v2)。该函数将两个版本号v1和v2以. 为分隔符拆分成数组,并对数组进行补零操作,使得两个版本号数组的长度相等。然后逐个比较对应位置的数字 大小,如果v1的当前位置数字大于v2的当前位置数字,则返回1;如果v1的当前位置数字小于v2的当前位置数字 ,则返回-1;如果两个版本号在所有位置上的数字都相等,则返回0,表示两个版本号相等。 */ 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 }
为什么文档表达都表达不清楚,到底说了什么,能用还是不能用,这是开发者写的???小学生一样逻辑不清,我高估了腾讯研发的水准
我就想知道这个接口调用后,如果用户什么也不填写的情况下,是返回空值还是返回“微信用户”给到我这边
为什么有的小程序还能使用之前的弹窗授权?
这文档写的真垃圾,话都说不清楚
请问下那如果后端是在解析openid和unionid时顺便存储了头像和昵称,后台管理那边看到的用户都是“微信用户”, 那该如何去做调整