小程式文檔中提出的調整說明
調整說明:
自 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(`上傳圖檔失敗`)
});
}
})
}, ![微信小程式父子傳值[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)