小程序用户授权又双叒改了

为了优化用户体验，小程序平台又双叒改了，此次改动又涉及到哪些api呢？

让我们看看这次又做了哪些更改

早在去年2月份，小程序社区里就发布相关公告: 《小程序登录、用户信息相关接口调整说明》
大致内容总结如下：

增加通过wx.login接口获取的登录凭证可直接换取unionID: auth.code2Session说明文档
原<button open-type="getUserInfo"/>获取用户真实个人信息的能力取消，返回匿名信息。获取openID与unionID能力不做调整。
新增getUserProfile接口，<button bindtap="getUserProfile"></button>触发，可获取用户信息（头像、昵称、性别），用户加密数据，每次触发都会弹框。

需要注意的是：截止2021.04.09日，[wx.getUserProfile](https://developers.weixin.qq.com/miniprogram/dev/api/open-api/user-info/wx.getUserProfile.html) 在开发者工具调试中，基础库`2.15.0`及以下版本只返回用户信息，在基础库`2.16.0`版本增加返回`encryptedData`等用户加密数据，所以开发者一定要记得将基础库版本设置为2.16.0

getUserProfile使用

COPY

// wxml 方法名称随意，一定要用button按钮触发
<button bindtap="getUserProfile"></button>

// js
getUserProfile(){
    wx.getUserProfile({
      desc: '', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
      success: (res) => {
        this.setData({
          userInfo: res.userInfo // 用户信息
        })
      }
    })
}

兼容实现

通过上面的说明，我们可以总结以下： wx.login + wx.getUserProfile == wx.getUserInfo
由于用户微信版本不一致，低版本的微信也不支持wx.getUserProfile（7.0.9以上支持），所以我们需要针对这种情况做出兼容处理，通过判断 wx.getUserProfile 是否存在来决定采用哪种授权方案
wxml代码如下

COPY

<view class="container">
  <view class="userinfo">
    <block wx:if="{{!hasUserInfo}}">
      <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>

js代码如下

COPY

Page({
  data: {
    userInfo: {},
    hasUserInfo: false,
    canIUseGetUserProfile: false,
  },
  onLoad() {
    if (wx.getUserProfile) {
      this.setData({
        canIUseGetUserProfile: true
      })
    }
  },
  getUserProfile(e) {
    // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
    // 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
    wx.getUserProfile({
      desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
      success: (res) => {
        console.log(res)
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    })
  },
  getUserInfo(e) {
    // 不推荐使用getUserInfo获取用户信息，预计自2021年4月13日起，getUserInfo将不再弹出弹窗，并直接返回匿名的用户个人信息
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  },
})

对于用户头像、昵称等信息，可以按照下列方式进行处理

前端调用wx.getUserProfile后，将用户信息缓存在本地
前端调用wx.getUserProfile后，将用户信息发送给后端，与用户信息绑定在一起
注：在此处推荐方法2，这样一来用户在pc端打开小程序也可以直接从后端获取头像，而不需要再次授权

吐槽

按照目前官方的文档说明和公告，wx.getUserProfile和wx.getUserInfo的区别只在于弹框触发的频率，前者触发的时候每次都弹框，后者只会弹框一次，实在是不理解为什么要新增一个API而不是对现有的进行修改
官方说明在4.13号及之后提交的正式版小程序中，将支持wx.getUserProfile，wx.getUserInfo将返回匿名用户信息，但是，在4.2/3号，很多线上的小程序wx.getUserInfo也返回了匿名消息，导致社区很多开发者反馈线上小程序无法获取用户信息。