微信小程序填坑之路（六）：wx.getUserInfo 接口的变动与使用

问题

在微信小程序开发中，获取用户信息是经常会用到的！在之前，我们直接调用wx.getUserInfo接口，就可以直接获取用户的信息。然而为了安全考虑，从2018年4月30号开始，wx.getUserInfo接口不能直接调用，需要先使用 <button open-type="getUserInfo"></button> 进行授权，意外就是来的这么突然，防不胜防！！！

解决方法

1、简单的展示用户信息

如果我们只是想将用户的昵称、头像等这类非敏感信息直接展示在页面中，我们可以选择使用<poen-data>组件。

<poen-data>是微信的一个组件，可以用于直接显示用户的信息，根据其type属性来判断展示的信息类型，示例如下：

  <open-data class="user-avatar" type="userAvatarUrl"></open-data>
  <open-data class="user-name" type="userNickName" lang="zh_CN"></open-data>

其中，type="userAvatarUrl"是获取用户头像，type="userNickName"是获取用户昵称，使用****展示用户其他信息点我 。

2、获取用户信息

目前的获取用户信息主要分为以下两点：

1. wx.getUserInfo(Object object)仍然可以直接使用，但是并不会弹出授权弹框，如果用户之前没有授权，则调用失败（注：即使调用wx.authorize(Object object)接口来发起用户信息授权也不会成功）。

2. 对于未授权的用户，调用 <button open-type="getUserInfo"></button>来获取用户信息，用户点击此button后会返回用户信息，返回的信息与wx.getUserInfo(Object object)返回的一样。

所以，针对以上两点，我们可以分两步走：先查看是否授权，如果授权直接调用wx.getUserInfo(Object object)，否则显示出授权按钮，通过用户点击授权按钮获取用户信息，示例如下：

<!-- 授权按钮-->
<button open-type="getUserInfo" wx:if="{{isShow}}" bindgetuserinfo="bindGetUserInfo"></button>

// 点击授权按钮，返回的信息
bindGetUserInfo: function(e) {
    console.log(e.detail.userInfo)
},

// 代码中调用接口获取用户信息
fetchUserInfo:function(){
    wx.getSetting({
        success: function(res) {
            // 隐藏授权 button
            ...
            // 查看是否授权
           if (res.authSetting['scope.userInfo']) {
              // 已经授权，可以直接调用 getUserInfo 获取用户信息
              wx.getUserInfo({
                 success: function(res) {
                     console.log(res)
                 },
                 fail: function(error) {
                     console.log(error
                 }
              });
            } else {
               // 显示授权 button
               ...
            }
        }
    });
}