微信小程序如何获取客户信息

这是我参与更文挑战的第2天，活动详情查看： 更文挑战

背景

当我们在使用微信小程序的时候，我们开发者有部分功能需要展示用户的个人信息，但是我们又不可能在用户不知情的情况下去私自把用户的信息盗取过来，这样就会给一些不法分子制造可乘之机。这就需要我们开发者通知用户，光明正大的请求用户的个人信息，通过用户的授权，我们可以使用用户的个人信息。

方法

最开始的小程序获取用户信息方式是通过调用wx.getUserInfo() 来获取。而且只能绑定到button上面来实现。

//wxml文件
<button open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">授权登录</button>
//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)
  }
})

而且以上方式在4月28日24时后发布的新版本小程序，开发者调用wx.getUserInfo或将不再弹出弹窗，直接返回匿名的用户个人信息。那我们如何获取用户信息呢。微信小程序官方当然给出了解决方案---使用wx.getUserProfile()。

新增getUserProfile接口

若开发者需要获取用户的个人信息（头像、昵称、性别与地区），可以通过wx.getUserProfile接口进行获取，该接口从基础库2.10.4版本开始支持，该接口只返回用户个人信息，不包含用户身份标识符。该接口中desc属性（声明获取用户个人信息后的用途）后续会展示在弹窗中，请开发者谨慎填写。开发者每次通过该接口获取用户个人信息均需用户确认，请开发者妥善保管用户快速填写的头像昵称，避免重复弹窗。

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

通过上述的例子我们就能很好的获取用户头像等信息。但是开发者还是要注意处理调用接口的时机，避免过度弹出弹窗骚扰用户。