为什么小程序getUserInfo获取的微信名称是“微信用户“?2.10.4词库之后如何渲染微信名称,微信头像和获取个人信息?

本文介绍了微信小程序在2.10.4版本后获取用户信息的变更,getUserInfo接口将返回匿名数据,而getUserProfile成为推荐的获取用户头像和昵称的方法,需用户授权。提供示例代码展示了如何在界面中适配这两个接口,确保用户信息的正确渲染。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >


前言

调用wx.getUserInfo获取不到微信名称和头像,获取到的是信息是微信名称是"微信用户"

一、为什么小程序getUserInfo获取的微信名称是"微信用户"?

在官方公告中:
2021年4月28日24时后发布的小程序新版本,无法通过wx.getUserInfo与<button open-type="getUserInfo"/>获取用户个人信息(头像、昵称、性别与地区),将直接获取匿名数据(包括userInfo与encryptedData中的用户个人信息),获取加密后的openID与unionID数据的能力不做调整。此前发布的小程序版本不受影响,但如果要进行版本更新则需要进行适配。

新增getUserProfile接口(基础库2.10.4版本开始支持),可获取用户头像、昵称、性别及地区信息,开发者每次通过该接口获取用户个人信息均需用户确认。具体接口文档:《getUserProfile接口文档》

在词库版本2.10.4之后getUserInfo获取的将是微信的拟名信息。

二、2.10.4词库之后如何渲染微信名称,微信头像

开发者若需要在界面中展示用户的头像昵称信息,可以通过组件进行渲染,该组件无需用户确认,可以在界面中直接展示。

代码如下(示例):

<open-data type="userNickName"></open-data>
type支持的合法值
说明
groupName拉取群名称
userLanguage用户的语言
userNickName用户昵称
userAvatarUrl用户头像
userGender用户性别
userCity用户所在城市
userProvince用户所在省份
userCountry用户所在国家

三、获取个人信息

获取个人信息的两种方法getUserInfo和getUserProfile,做兼容判断词库是否支持getUserProfile,如果不支持getUserProfile则按照getUserInfo(微信小程序官方公告不推荐使用getUserInfo)来获取个人信息

<view class="container">
  <view class="userinfo">
    <block wx:if="{{!hasUserInfo}}">
    <!- 判断当前词库是否支持userProfile方法 ->
      <button wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile"> 获取头像昵称 </button>
      <button wx:else open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
    </block>
    <block wx:else>
      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>
</view>
Page({
  data: {
    userInfo: {},
    hasUserInfo: false,
    canIUseGetUserProfile: false,
  },
  onLoad() {
  //进入页面后判断当前词库是否支持userProfile方法
    if (wx.getUserProfile) {
      this.setData({
        canIUseGetUserProfile: true
      })
    }
  },
  getUserProfile(e) {
    // 推荐使用wx.getUserProfile获取用户信息,开发者每次通过该接口获取用户个人信息均需用户确认
    // 开发者妥善保管用户快速填写的头像昵称,避免重复弹窗
    wx.getUserProfile({
      desc: '获取个人信息', // 声明获取用户个人信息后的用途,后续会展示在弹窗中,请谨慎填写
      success: (res) => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    })
  },
  getUserInfo(e) {
    // 不推荐使用getUserInfo获取用户信息,预计自2021年4月13日起,getUserInfo将不再弹出弹窗,并直接返回匿名的用户个人信息
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  },
})
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

我有一只大雯宝

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值