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經歷還是很有收獲的,對這個文檔的了解更多了一些,對於文檔里面一些小字兒一定要格外注意,要不就有可能遇到這種類似的情況。