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

@

目录

• 前言
• 一、为什么小程序getUserInfo获取的微信名称是"微信用户"？
• 二、2.10.4词库之后如何渲染微信名称，微信头像
• 三、获取个人信息

前言

调用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
    })
  },
})