wx.getUserInfo() API的使用方案流程汇总

注：

wx.getUserInfo() API 官网介绍是获取用户信息功能，但是在小程序中调用时弹出的框展示的是授权登录弹框，所以下文中说的 授权登录 和 获取用户信息 都是指这个功能

所遇问题

本文主要聊一聊wx.getUserInfo() API的使用方案，先撇开这个备受好评（饱受争议）的接口不断改动不谈，仅以一个正常程序请求用户信息就分好几种情况，而每一种情况处理起来都不简单
例如下面的情况：

1. 正常打开小程序，首次进入时的授权
2. 分享时，不同界面的分享，有的界面需要登录，需要登录的界面，直接打开分享的小程序链接，在页面上需要登录

解决

为了在不同方式进入小程序时都可处理登录逻辑，我们需要在可能分享进入的页面加上授权登录的弹框

1. 新建一个components：

由于这个API的要求是需要使用 button 以 open-type="getUserInfo" 的方式来授权登录，因此为了避免重复代码，将弹框以组件的方式实现，部分逻辑可以在组件中实现，这样将大大减少页面中的代码量，代码如下：

<view style="width: 100%;height: 100%;position: fixed;top: 0;left: 0;background: #000;z-index: 20000;opacity: 0.7;"
  catchtouchmove="preventTouchMove" wx:if="{{show}}"></view>

<view class="modalDlg" wx:if="{{show}}">
  <image class='modalImage' src="https://jklyk.jiankangle.com/modal_back_top.png" />

  <view class='modalImage' style='display:flex;justify-content: center;flex-direction: column;align-items: center;'>
    <text style='color:white;font-size:40rpx;font-weight:700;'>请允许授权</text>
    <text style='color:white;font-size:28rpx;'>需要您的信息登录使用</text>
  </view>
  <view bindtap='cancelShowGetUserInfoView' class='cancelButton'>
    <text style='color:white;font-size:28rpx;'>取消</text>
  </view>

  <view class="yinsiClass" bindtap="bindyinsizhengce">《隐私政策》</view>
  <view wx:if="{{canGetUserProfile}}" class='registerButton' bindtap="bindGetUserProfile">授权登录</view>
  <button wx:else open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo" class='registerButton'>授权登录2</button>
</view>

此处做这个API的兼容工作，因为在 2.10.4 基础库版本之后，wx.getUserinfo已经获取不到信息，需要改为wx.getUserProfile 但是老版本的微信需要兼顾，兼容方法也很简单，通过在组件中添加个判断就可以：if (wx.getUserProfile) 如果高版本会返回真，低版本会返回false继续使用getUserInfo
弹出的界面如下：

授权登录处为 button 点击可触发小程序登录授权

2. 在js中获取到用户信息，回传给页面：

2.10.4新版本通过wx.getUserProfile这种方式拿到信息

	bindGetUserProfile(e) { //绑定用户信息
      var self = this
      wx.getUserProfile({
        desc: '用于获取会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
        success: (userRes) => {
          self.triggerEvent('bindGetUserInfo', {
            'userInfo': userRes.userInfo
          })
        },
        fail: (err) => {
          console.log('获取用户信息失败：' + JSON.stringify(err))
          self.cancelShowGetUserInfoView()
        }
      })
    },

之前旧版本通过wx.getUserInfo()拿到用户信息

	bindGetUserInfo(e) {
      // console.log('获取到的用户信息：', JSON.stringify(e))
      this.triggerEvent('bindGetUserInfo', {
        'userInfo': e.detail.userInfo
      })
    },

3. 使用

index.json中：引用组件

"usingComponents": {
    "showGetUserInfoView": "../../../../components/alert/showGetUserInfoView/showGetUserInfoView"
  },

index.wxml:

<showGetUserInfoView show="{{show}}" bindbindGetUserInfo="getUserInfoMethod"></showGetUserInfoView>

在js中通过设置show 的值来 控制是否弹出授权框

index.js中：

getUserInfoMethod: function (e) {
    console.log('获取个人信息：', JSON.stringify(e))
    this.setData({
      show: false
    })
  }

拿到用户信息

综上所述，在页面使用到获取用户信息的弹框，都可以通过组件这种方式在较少代码量的情况下，实现不同页面上弹框的需求，前提是用户对每个页面的分享功能做好判断，分享后需要登录的界面，要处理好授权逻辑