评论

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

自 2022 年 10 月 25 日 24 时后(以下统称 “生效期” ),用户头像昵称获取规则将进行如下调整:详细内容请看正文

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

调整说明:

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


 

最后一次编辑于  2022-10-25  
点赞 1
收藏
评论

8 个评论

  • puxu88
    puxu88
    发表于移动端
    2022-11-10
    为什么要这么sha比设计!回收干嘛,不是一家人吗?垃圾到骨子里!
    2022-11-10
    赞同 3
    回复 1
    • CRMEB
      CRMEB
      2022-11-10
      可能是政策有变化
      2022-11-10
      回复
  • 方丘子
    方丘子
    2023-04-13

    所以现在可以让用户还没有体验就先填写昵称和头像了嘛?

    2023-04-13
    赞同 1
    回复
  • 再吃辣就是猪
    再吃辣就是猪
    03-26

    经过排查发现,前端调试器无论新用户还是老用户都能正常登录,辗转费了几个号,再测线上版本,的确新用户是无法登录的,

    后面经过查询发现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
            }
    
    03-26
    赞同
    回复 1
    • 再吃辣就是猪
      再吃辣就是猪
      03-26
      谢谢楼主,还以为评论错了文章,compareVersion这个直接用上了
      03-26
      回复
  • 300瓦月移花影映窗纱
    300瓦月移花影映窗纱
    2023-07-25

    为什么文档表达都表达不清楚,到底说了什么,能用还是不能用,这是开发者写的???小学生一样逻辑不清,我高估了腾讯研发的水准

    2023-07-25
    赞同
    回复
  • 林
    2023-06-26

    我就想知道这个接口调用后,如果用户什么也不填写的情况下,是返回空值还是返回“微信用户”给到我这边

    2023-06-26
    赞同
    回复
  • qin(chao)jie
    qin(chao)jie
    2022-12-27

    为什么有的小程序还能使用之前的弹窗授权?

    2022-12-27
    赞同
    回复 1
    • CRMEB
      CRMEB
      2022-12-28
      没有发布过新版本的保持原样
      2022-12-28
      回复
  • 点点
    点点
    2022-12-04

    这文档写的真垃圾,话都说不清楚

    2022-12-04
    赞同
    回复
  • 李    ⃟强
    李 ⃟强
    2022-11-30

    请问下那如果后端是在解析openid和unionid时顺便存储了头像和昵称,后台管理那边看到的用户都是“微信用户”, 那该如何去做调整

    2022-11-30
    赞同
    回复 3
    • CRMEB
      CRMEB
      2022-11-30
      现在获取不到
      2022-11-30
      回复
    • 暗里着迷
      暗里着迷
      2022-12-02回复CRMEB
      获取不到有什么办法吗?没有办法能获取到用户的信息了嘛?
      2022-12-02
      回复
    • CRMEB
      CRMEB
      2022-12-05回复暗里着迷
      没有办法
      2022-12-05
      回复
登录 后发表内容