Taro中使用getUserInfo获取信息及授权遇坑

此文转载自：https://blog.csdn.net/qq_44983621/article/details/111827352#commentBox

文章目录

Taro中使用getUserInfo获取信息及授权遇坑

首先声明这个并不是Taro的坑，而是微信小程序的坑，写篇文章记录一下。

背景：由于对taro用的并不是很熟练，导致上手还是对它很不满意的。但是随着深入发现写起来还是很舒服。

Taro文档及小程序文档的翻找

在Taro的文档中我们可以看到在如图位置找到这个对应接口

但是我们想使用这个接口的话，我们必须要在用户授权过的情况下，因此我们需要先去授权。

如下如位置：

在下方它的获取录音的示例中

// 可以通过 Taro.getSetting 先查询一下用户是否授权了 "scope.record" 这个 scope
Taro.getSetting({
  success: function (res) {
    if (!res.authSetting['scope.record']) {
      Taro.authorize({
        scope: 'scope.record',
        success: function () {
          // 用户已经同意小程序使用录音功能，后续调用 Taro.startRecord 接口不会弹窗询问
          Taro.startRecord()
        }
      })
    }
  }
})

结合上述文档我们可以的出，我们好像可以通过更改scope的值来获取不同的权限。

scope的值如下：

第一条就是我们的userInfo，当我们看到这里的时候我们就会自认为把代码改成如下应该就可以了：

Taro.getSetting({
  success: function (res) {
    if (!res.authSetting['scope.userInfo']) {
      Taro.authorize({
        scope: 'scope.userInfo',
        success: function () {
            Taro.getUserInfo()
        }
      })
    }
  }
})

但是当我们改成这玩意的时候，我们会发现报错了，在微信控制台出现一些看不懂的错误，而且并不会弹出授权窗口。到这一步我花费了一段时间在网上找，但是并没有发现满意的答案。最后在微信小程序的文档中发现了这样一段话：

看到这里心态都崩了，搞了半天居然说不支持，然后发现这种方式有一个缺点，只能通过点击来弹出授权窗口，因此就有如下代码：

<AtButton  openType={"getUserInfo"} onGetUserInfo={handleBtn}>注册</AtButton>

const handleBtn = (e) => {
    console.log(e)  // e.detail.userInfo 这个就有我们的用户信息
}

在我们Taro中的按钮可以绑定上述属性来获取userInfo。<Button></Button>和<AtButton></AtButton>中都可以有这两个属性。

以下为尝试内容（并没有成功）

在这里我还没有死心，想能不能通过不点击按钮的方式获取到微信小程序的用户信息。然后我又想到了微信原生组件里面有open-data这个组件。他们能显示出来用户信息，那我能不能通过获取到这个dom，拿到里面的value。后来翻Taro的文档，再组件中找到了这个组件<OpenData>

这个是这个组件中属性type的取值，然后我分别尝试了一下userNickName和userAvatarUrl但是从获取到的dom里面并没有发现它们的value值，然后在网上查了一下原因，微信小程序对数据做了处理，只能看见，拿不到的，这说明他们这方面做的还是很棒的。

总结

对于这次的bug经历还是很有收获的，对这个文档的了解更多了一些，对于文档里面一些小字儿一定要格外注意，要不就有可能遇到这种类似的情况。