关于小程序:微信小程序-wxgetUserProfile-使用示例-替代wxgetUserInfo

点击查看 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,
        // ....
      }
      // 调用接口保护本地登录态
  }

这样就完结啦~