微信小程序 wx.getUserProfile 使用示例 （替代wx.getUserInfo）

点击查看 wx.getUserProfile 和 wx.getUserInfo 的区别

使用背景

• 微信官方阉割了 wx.getUserInfo 接口，前端需要使用新的接口 wx.getUserProfile 替代
• 由于 wx.getUserProfile 接口返回的加密数据中，不再包含 openId 和 unionId，因此后端只能通过前端 wx.login后 拿到的 code 去换取
• 由于 wx.login 的时效性限制，code换取回 openId 和 unionId之后，若用户不调用 wx.getUserProfile 授权获取用户信息，openId 和 unionId存储在前端或者后端都是有点多此一举的，并且若前端存储，在接口中给后端也是不安全的。

因此同时调起 wx.login 和 wx.getUserProfile

• 将 wx.login 返回的code 和 wx.getUserProfile 返回的 userInfo、encryptedData 等，一次性传给后端，换回小程序登录态token
• 实际使用时，由于wx.getUserProfile 必须在点击事件中触发，所以就在点击事件中使用 Promise.all

具体代码如下

  <button bindtap="getUserProfile">微信帐号快速登录</button>

  // 获取code、userInfo等信息
  getUserProfile () {
    var p1 = new Promise((resolve, reject) => {
      wx.login({
        success: res => {
          // 这里也可以选择性返回需要的字段
          resolve(res)
        }
      })
    })
    var p2 = new Promise((resolve, reject) => {
      wx.getUserProfile({
        desc: '用于完善会员资料',
        success: res => {
          // 这里也可以选择性返回需要的字段
          resolve(res)
        }
      })
    })
    // 同时执行p1和p2，并在它们都完成后执行then
    Promise.all([p1, p2]).then((results) => {
      // results是一个长度为2的数组，放置着p1、p2的resolve
      this.handleUserInfo({
      	  // 这里也可以选择性返回需要的字段
          ...results[0],
          ...results[1]
      })
    })
  },
  // 组织好后端需要的字段，并调用接口
  handleUserInfo (data) {
  	const { code, encryptedData, userInfo, iv, rawData, signature, cloudID } = data
  	const params = {
  	  userInfo,
  	  // ....
  	}
  	// 调用接口维护本地登录态
  }

这样就结束啦~