山东大学项目实训——解决微信小程序无法获得用户信息问题

一、关于用户信息接口的调整

在之前的微信小程序中，获取用户信息都是用wx.getUserInfo（）方法，但是近期对于用户信息相关接口进行了调整，调整如下：
为优化用户的使用体验，平台将进行以下调整：

1.2021年2月23日起，若小程序已在微信开放平台进行绑定，则通过wx.login接口获取的登录凭证可直接换取unionID

2.2021年4月28日24时后发布的小程序新版本，无法通过wx.getUserInfo与获取用户个人信息（头像、昵称、性别与地区），将直接获取匿名数据（包括userInfo与encryptedData中的用户个人信息），获取加密后的openID与unionID数据的能力不做调整。此前发布的小程序版本不受影响，但如果要进行版本更新则需要进行适配。

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

4.由于getUserProfile接口从2.10.4版本基础库开始支持（覆盖微信7.0.9以上版本），考虑到开发者在低版本中有获取用户头像昵称的诉求，对于未支持getUserProfile的情况下，开发者可继续使用getUserInfo能力。开发者可参考getUserProfile接口文档中的示例代码进行适配。

二、调整说明

即wx.getUserInfo接口的返回参数不变，但开发者获取的userInfo为匿名信息。

三、wx.getUserInfo方法（现在返回匿名用户数据，需自行解密）

示例代码：
wxml代码：

<!-- 如果只是展示用户头像昵称，可以使用 <open-data /> 组件 -->
<open-data type="userAvatarUrl"></open-data>
<open-data type="userNickName"></open-data>
<!-- 需要使用 button 来授权登录 -->
<button wx:if="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">授权登录</button>
<view wx:else>请升级微信版本</view>

js代码：

Page({
  data: {
    canIUse: wx.canIUse('button.open-type.getUserInfo')
  },
  onLoad: function() {
    // 查看是否授权
    wx.getSetting({
      success (res){
        if (res.authSetting['scope.userInfo']) {
          // 已经授权，可以直接调用 getUserInfo 获取头像昵称
          wx.getUserInfo({
            success: function(res) {
              console.log(res.userInfo)
            }
          })
        }
      }
    })
  },
  bindGetUserInfo (e) {
    console.log(e.detail.userInfo)
  }
})

返回的数据：


可以看到没有任何用户的真实数据，用户名统一为微信用户，而不是真正的用户名。

四、解决方法：wx.getUserProfile方法

wx.getUserProfile(Object object)方法是新增的获取用户信息接口的方法，页面产生点击事件（例如 button 上 bindtap 的回调中）后才可调用，每次请求都会弹出授权窗口，用户同意后返回 userInfo。该接口用于替换 wx.getUserInfo。

参数：

属性	类型	默认值	必填	说明
lang	string	en	否	显示用户信息的语言
desc	string		是	声明获取用户个人信息后的用途，不超过30个字符
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

object.lang 的合法值：

值	说明
en	英文
zh_CN	简体中文
zh_TW	繁体中文

属性	类型	说明	最低版本
userInfo	UserInfo	用户信息对象	2.10.4
rawData	string	不包括敏感信息的原始数据字符串，用于计算签名	2.10.4
signature	string	使用 sha1( rawData + sessionkey ) 得到字符串，用于校验用户信息，详见 用户数据的签名验证和加解密	2.10.4
encryptedData	string	包括敏感数据在内的完整用户信息的加密数据，详见 用户数据的签名验证和加解密	2.10.4
iv	string	加密算法的初始向量，详见 用户数据的签名验证和加解密	2.10.4
cloudID	string	敏感数据对应的云 ID，开通云开发的小程序才会返回，可通过云调用直接获取开放数据，详细见云调用直接获取开放数据	2.10.4

示例代码：
my.wxml文件代码：

  <view class="UCenter-bg">
    <view class="userinfo">
    <!-- <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button> -->
    <button wx:if="{{!hasUserInfo &&canIUseGetUserProfile}}" bindtap="getUserProfile">获取用户信息</button>
    <block wx:else>
     <open-data class="cu-avatar xl round "  type="userAvatarUrl"></open-data> 
    </block>
  </view>

my.js代码：

onLoad: function (options) {
 
  if (wx.getUserProfile) {
    this.setData({
      canIUseGetUserProfile: true
    })
  }

  },
  getUserProfile(e) {
    // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
    // 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
    wx.getUserProfile({
      lang:"zh_CN",
      desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
      success: (res) => {
        console.log(res)
        this.setData({

          userInfo: res.userInfo,
          hasUserInfo: true
        })
        const user = res.userInfo;
        console.log(user)
        wx.setStorageSync("firstuser", user);
      }
      
      
    })

  },

效果图：

点击获取用户信息：

点击允许：

可见返回了真实的数据。

用户头像和用户名也可以相应加载出来了！