開發 | 小程序如何使用新的方式獲取用戶資料？

前幾天，微信官方突然宣布，小程序將使用新的用戶數據獲取的方式。

簡單來說，這次能力更新，為 button組件的open-type屬性賦予了新的有效值getUserInfo（聲明需要獲取用戶信息）。

同時，官方還宣布，如果提審的小程序出現「啟動即要求授權」和「強制要求授權」的情況，將會無法通過審核。

那麼，開發者應該如何適配新推出的獲取用戶資料方式呢？在新方式下，還需要注意一些什麼呢？

知曉程序（微信號 zxcx0101）今天就來為你講解，如何使用新方法獲取用戶資料。

關注「知曉程序」微信公眾號，在後台回復「0109」，一張圖教你玩轉小程序。

如何使用新方法獲取用戶資料？

我們以「虛榮資料庫」小程序為例，來展示如何將舊的登錄模式升級到新的模式。

在舊版的「虛榮資料庫」中，小程序調用獲取用戶數據模式是這樣的：處理登錄、獲取用戶數據和註銷行為的方法存儲於小程序實例（app.js）中，便於實際頁面調用。

大致步驟是這樣的：

1. 當小程序需要調取用戶資料時，用戶通過點擊相應元素（不一定是按鈕），觸發事件；
2. 相應頁面實例收到點擊事件後，調用小程序實例中的登錄方法，進行資料讀取；
3. 小程序實例調用微信介面，獲取用戶資料；
4. 成功獲取資料，調用頁面實例傳入的回調函數；
5. 頁面實例通過回調函數，得知介面調用狀態和用戶資料，進行後續任務。

簡單的代碼如下：

// page.js

Page({
login{
sync(function* (api) {
var res = yield app.login(api.next) // 使用了框架，將 (err, result) 中的 result 傳入 res，同時保持同步性。
if (api.err) return console.log("login function has error") // 如果登錄方法出錯則報錯
// 登錄完畢後，調用用戶數據等信息，使用 that.setData 寫入
})
}
})

// app.js

App({
login(callback){
wx.login({ // 獲取用戶資料前，此步驟必需
success: function (res) {
if (res.code) {
var logincode = res.code // 獲取匿名識別符，用來鑒別同一用戶
wx.getUserInfo({
success: function (res) {
wx.request({})// 將用戶匿名識別符、資料發送至伺服器
callback(null, res) // 將成功獲取用戶資料的提示發送回頁面實例
},
fail: function {
wx.showModal({}) // 當拒絕授權的時候，提示用戶需要開啟許可權，確認時調用微信的許可權管理界面
callback("fail to modify scope", null)
}
})
} else {
callback("fail to call wx.login", null)
}
}
});
}
})

在新的方式中，獲取用戶數據的實體，從 wx.getUserInfo函數，變成了按鈕上的事件函數。

使用新的方式獲取用戶信息，過程大致如下：

1. 當用戶點擊綁定有頁面實例獲取用戶數據方法的按鈕後，微信向用戶確認授權；
2. 授權完成，微信調用按鈕上綁定的方法，同時傳入用戶數據；
3. 頁面實例調用 app.js中的登錄函數，同時額外傳入用戶數據。

之後的事情，一切照舊。

釐清了新舊方法之間的差異，代碼的修改思路就比較清晰了。

首先，我們將觸發登錄事件的元素，統一改為 button元素，還要加上open-type="getUserInfo"參數。

同時，我們還要加入 bindgetuserinfo參數，並在其中填入加入獲取用戶數據的頁面實例方法。

然後，我們在相應事件中，將用戶數據傳入小程序實例的 login方法。

// page.js

Page({
login(userinfo){ // 需要一個參數來額外接收用戶數據
app.login(userinfo, (err, res) => { // 呃…… 框架死掉了 ?? 只能屈服於回調地獄
if (err) return console.log("login function has error") // 如果登錄方法出錯則報錯
// 登錄完畢後，調用用戶數據等信息，使用 that.setData 寫入
})
}
})

接下來，只需要讓 app.js按新的方法處理用戶數據，就可以了。

login(userinfo, callback) {
wx.login({}) // 現在，調用 wx.login 是一個可選項了。只有當你需要使用微信登錄鑒別用戶，才需要用到它，用來獲取用戶的匿名識別符
if (userinfo.detail.errMsg == "getUserInfo:ok") {
wx.request({}) // 將用戶信息、匿名識別符發送給伺服器，調用成功時執行 callback(null, res)
}
else if (userinfo.detail.errMsg == "getUserInfo:fail auth deny") { // 當用戶點擊拒絕時
wx.showModal({}) // 提示用戶，需要授權才能登錄
callback("fail to modify scope", null)
}
}

現在，來跑一下小程序——嗯，一切正常。

如何向下兼容舊版微信？

想必很多人在使用新方法的時候，都會擔心舊版微信的兼容問題。

的確，這種登錄方法在版本太老舊的微信上，是無法正常完成的。

不過不用擔心，我們可以使用微信提供的 wx.canIUse方法，來做到介面兼容性核查，在舊版微信上引導用戶更新，或是選擇使用舊方式獲取用戶信息。

我們先在按鈕上，用 bindtap來額外綁定一個兼容性檢查事件：

然後，我們在相應的函數中，進行兼容性檢查：

// page.js

Page({
canILogin{
if(!wx.canIUse("button.open-type.getUserInfo")){ // 對應的功能就是通過按鈕獲取用戶資料
wx.showModal({}) // 向用戶提示需要升級微信
}
}
})

在開發者工具中，將「基礎庫版本」調低，再次運行，可以看到小程序成功做出了判斷。

在本例中，我們選擇提示、引導用戶更新微信；你也可以選擇調用 wx.getUserInfo介面，直接獲取用戶資料。

想看完整的代碼示例？關注微信公眾號「知曉程序」，回復「源碼」，即可獲得利用新方式獲取用戶資料的源碼 Demo。

如果小程序需要判斷不同用戶，但不需要獲取額外用戶資料，只需在小程序調用 wx.login介面，再用自己的伺服器調用微信的介面，即可獲取用戶的 OpenID，無需用戶額外授權。

在新方式下，若用戶首次拒絕授權，可以通過再次點擊按鈕重新請求授權。開發者只需提示用戶需要授權即可，無需調用小程序許可權開關界面，要求用戶手動打開授權開關。

另外，轉換到新方式時，可以將相應視覺元素用 button打包，並為相應button設定無背景色、無邊框等屬性，達到隱藏觸發按鈕的目的，減少對界面的改動。

當然，如果你的小程序是剛啟動就會要求用戶授權的，那麼你應該儘快修改小程序，使用新的按鈕回調方式，獲取用戶的資料。

微信官方已經提示開發者，不應在剛啟動小程序時直接向用戶授權獲取用戶資料，小程序也不應該強制讓用戶授權小程序訪問用戶資料。否則，小程序將不予通過審核。

關注「知曉程序」公眾號，在微信後台回復「開發」，獲取小程序開發精選文章。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！