小程序文档中提出的调整说明
调整说明:
自 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中添加文章来源：https://www.toymoban.com/news/detail-493259.html
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本次分享调整的所有内容了！有不懂的地方可以在下方留言文章来源地址https://www.toymoban.com/news/detail-493259.html
到了这里，关于针对小程序wx.getUserProfile接口将被收回后做出的授权调整的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
