针对小程序wx.getUserProfile接口将被收回后做出的授权调整

小程序文档中提出的调整说明

调整说明:

自 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 MPconst version = uni.getSystemInfoSync().SDKVersionif (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.detailthis.$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(`上传图片失败`)});}})},