大前端学习之旅（7）-小程序获取用户登陆信息实战问题及解决方案

在学习大前端的微信小程序课程中，在学习到获取用户信息基本信息的时候会发现出现以下错误。同时有时候会发现没有弹出授权弹窗

问题原因：

经过查询微信官方开发文档，主要是由于调用函数引起。课程使用的微信开发库的版本较低，同时在课程发布后，微信对相关的接口调用做出了更改。同时由于近期课程学习的时候，本地安装的版本为兼容性最高的版本，多重因素的作用下，造成了以上问题

解决方案：

根据问题原因，查询了官方文档之后，找到以下兼容性方案：

index.wxml 代码

<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>

index.js 代码

Page({
  data: {
    userInfo: {},
    hasUserInfo: false,
    canIUseGetUserProfile: false,
  },
  onLoad() {
    if (wx.getUserInfo) {
      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
    })
  },
})

主要涉及的代码信息在图中已经标注，采用兼容的方案做相关的应对，仅以此文记录备查。