微信小程序开发错误：LoginError {type: "ERR_WX_GET_USER_INFO"}解决方法

错误内容

微信小程序登录接口报以下错误：
LoginError {type: “ERR_WX_GET_USER_INFO”, message: “获取微信用户信息失败，请检查网络状态”,
detail: {errMsg: “getUserInfo:fail scope unauthorized”}
message: “获取微信用户信息失败，请检查网络状态”
type: “ERR_WX_GET_USER_INFO”

发生错误源码

以下为使用mpvue开发小程序遇到此错误的源码：

<script>
// import {get} from './util'
import qcloud from 'wafer2-client-sdk'
import config from './config.js'

export default {
  async created () {
    qcloud.setLoginUrl(config.loginUrl)
    qcloud.login({
      success: function (userInfo) {
        console.log('登录成功', userInfo)
      },
      fail: function (err) {
        console.log('登录失败', err)
      }
    })
  }
}
</script>

<style>
</style>

发生错误原因

以上接口已经被微信废弃，但为了兼容暂时没有去除。

解决方法

由于微信的 wx.getUserInfo 不再弹窗授权，得修改为 button 弹窗获取用户信息。

<template>
  <div>
    <button open-type="getUserInfo" lang="zh_CN" @getuserinfo="doLogin">获取用户信息</button>
  </div>
</template>

<script>
import qcloud from 'wafer2-client-sdk'
import config from '@/config.js'
export default {
  methods: {
    doLogin: function (e) {
      qcloud.setLoginUrl(config.loginUrl)
      qcloud.login({
        success: function (userInfo) {
          console.log('登录成功', userInfo)
        },
        fail: function (err) {
          console.log('登录失败', err)
        }
      })
    }
  }
}
</script>
<style>

</style>

点击获取用户信息按钮后，开发者工具打印信息如下，信息获取成功。

其他解决方法

微信还提供了一个新的 API：qcloud.requestLogin，此函数接受了 code, encryptedData, iv 以向后台提供用户信息。
详情请参考文章：https://github.com/tencentyun/wafer2-client-sdk