Taro中使用getUserInfo獲取資訊及授權遇坑
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經歷還是很有收穫的,對這個文件的瞭解更多了一些,對於文件裡面一些小字兒一定要格外注意,要不就有可能遇到這種類似的情況。