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

调整说明:

自 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本次分享调整的所有内容了！有不懂的地方可以在下方留言