微信小程序中获取用户信息getUserInfo替换方案

Posted 2022-11-28 诗渊

场景说明

我们在开发过程中，如果使用getUserInfo获取用户头像和昵称等用户信息时，会出现如下报错：

(in promise) MiniProgramError
"errMsg":"getUserInfo:fail scope unauthorized"
Object

这是因为官方调整了获取用户信息的方法，详见https://developers.weixin.qq.com/community/develop/doc/0000a26e1aca6012e896a517556c01，在小程序中有两种替代方案

• （1）获取用户基本信息：1、使用 button 组件，并将 open-type 指定为 getUserInfo 类型,（点击查看详情）。
• （2）展示用户基本信息：使用 open-data，（点击查看详情）

其目的可能主要是为了显示的让用户在点击操作时提示用户去授权，而不是类似进入小程序首页或其他任意场景下提示。具体解决方案的示例代码如下：

1、使用button组件获取用户信息

（taro版）

// 判断是否已授权，可用于是否需要展示授权按钮
componentDidMount () 
    Taro.getSetting().then((res)=>
      if (res.authSetting['scope.userInfo']) 
        // 已经授权，可以直接调用 getUserInfo 获取头像昵称
        Taro.getUserInfo().then(result=>
            console.log(result.userInfo);
            this.setState(
                userInfo
            )
        )
      
    )


// 用户授权后 获取用户信息
bindGetUserInfo(e)
    console.log(e.detail.userInfo);
    if (e.detail.userInfo) 
        this.setState(
            userInfo
        )
    


// 这里需要注意 原来的bindGetUserInfo 事件在taro修改为 onGetuserinfo 
<Button open-type="getUserInfo" onGetuserinfo=this.bindGetUserInfo.bind(this)>授权登录</Button>

原生小程序也类似：

onLoad: function() 
    // 查看是否授权
    wx.getSetting(
      success: function(res)
        if (res.authSetting['scope.userInfo']) 
          // 已经授权，可以直接调用 getUserInfo 获取头像昵称
          wx.getUserInfo(
            success: function(res) 
              console.log(res.userInfo)
            
          )
        
      
    )
,

bindGetUserInfo: function(e) 
    console.log(e.detail.userInfo)


<button open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">授权登录</button>

这样用户授权后，即可拿到用户信息数据，并做后续的处理逻辑。

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

方法1是为了获取用户信息，进行逻辑处理，如果只是为了展示用户信息的话，就可以用 open-data:

<open-data type="userAvatarUrl"></open-data>
<open-data type="userNickName"></open-data>