微信小程序____获取用户信息接口调整

引言

---

通常微信小程序必不可少的会有获取用户信息的功能，但官方出具通知了，对获取用户信息接口进行了调整。

规则改，小程序从业者就得跟着改~ 调整通知地址：小程序与小游戏获取用户信息接口调整，请开发者注意升级。

接口调整内容

---

由于收到开发者的反馈，为了方便开发者更好地使用获取用户信息的接口，开发者仍然可以使用 wx.getUserInfo 接口获取用户信息。

具体优化调整如下：

1. 获取用户头像昵称，第一次需要使用 button 组件授权，如果已经用组件授权了，wx.getUserInfo 可直接返回用户数据，无需重复授权弹窗。
2. 如果没有用 button 组件授权，wx.getUserInfo 调用接口返回失败，提醒开发者需要先使用 button 组件授权。
3. 用户可在设置中，取消授权。取消授权后需重新用 button 组件拉起授权。

为优化用户体验，使用 wx.getUserInfo 接口直接弹出授权框的开发方式将逐步不再支持。从2018年4月30日开始，小程序与小游戏的体验版、开发版调用 wx.getUserInfo 接口，将无法弹出授权询问框，默认调用失败。正式版暂不受影响。开发者可使用以下方式获取或展示用户信息：

一、小程序:

1、使用 button 组件，并将 open-type 指定为 getUserInfo 类型，获取用户基本信息。

详情参考文档:

https://developers.weixin.qq.com/miniprogram/dev/component/button.html

2、使用 open-data 展示用户基本信息。

详情参考文档:

https://developers.weixin.qq.com/miniprogram/dev/component/open-data.html

试用下来感觉open-data还是比较好替换的~

解决方案

---

app.js

    // 获取用户信息
    wx.getSetting({
      success: res => {
        console.info("获取用户信息 getSetting 回调结果:")
        console.info(res)
        if (res.authSetting['scope.userInfo']) {
          // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
          wx.getUserInfo({
            success: res => {
              // 可以将 res 发送给后台解码出 unionId
              this.globalData.userInfo = res.userInfo

              // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
              // 所以此处加入 callback 以防止这种情况
              if (this.userInfoReadyCallback) {
                this.userInfoReadyCallback(res)
              }
            }
          })
        }
      }
    }),
    globalData: {
      userInfo: null
    }

需要展示我的页面

在展示用户信息之前需要授权。

授权页面

mine.wxml

   
  
    
      
      {{userInfo.nickName}}
    
    
  

mine.js

var app = getApp()
Page({
  /**
   * 页面的初始数据
   */
  data: {
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo'),
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {
    var that = this
    
    if (app.globalData.userInfo) {
      this.setData({
        userInfo: app.globalData.userInfo,
        hasUserInfo: true
      })
    } else if (this.data.canIUse) {
      // 能支持open-type=getUserInfo 版本的做法
      // 跳转到授权页面
      wx.navigateTo({
        url: '../author/author'
      })
    } else {
      // 在没有 open-type=getUserInfo 版本的兼容处理
      wx.getUserInfo({
        success: res => {
          app.globalData.userInfo = res.userInfo
          this.setData({
            userInfo: res.userInfo,
            hasUserInfo: true
          })
        }
      })
    }
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function() {

  },


})

author.wxml

  
  宜居生活申请获得以下权限：
  获得你的公开信息（昵称、头像等）
   确认授权 

author.wxss

.page {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.logo{
  width: 240rpx;
  height: 296.3rpx;
  margin-top: 110rpx;
  margin-bottom: 110rpx;
}

.text_apply{
  font-size: 18px;
  margin-top: 27.778rpx;
}

.text_warn{
  font-size: 14px;
  margin-top: 27.778rpx;
  margin-bottom: 69.444rpx;
  color: grey;
}

.author_button{
  width: 729.17rpx;
}

author.js

  getUserInfo: function (e) {
    console.log(e)
    app.globalData.userInfo = e.detail.userInfo
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
    wx.switchTab({
      url: '../mine/mine'
    })
  }