| 這個作業屬於哪個課程 | <2021春軟件工程實踐|S班> |
|---|---|
| 這個作業要求在哪里 | <作業要求> |
| 這個作業的目標 | 個人技術博客 |
技術概述
學習原因：在開發微信小程序的時候，我們一般都需要獲取當前用戶的微信信息，來存儲用戶的個性化設置，以及提供個性化的服務。
做什么：這里要介紹一下如何獲取用戶的登錄狀態及個人信息。
技術難點：在我個人開發過程中發現有許多參考文檔是舊的，不能很好地解決問題，於是由此介紹下個人的解決方案。
技術詳述
- 獲取用戶身份標識
我們一般是采用wx.login()函數來獲取獲取登錄憑證（code）。通過憑證進而換取用戶登錄態信息，包括用戶在當前小程序的唯一標識（openid）、微信開放平台帳號下的唯一標識（unionid，若當前小程序已綁定到微信開放平台帳號）及本次登錄的會話密鑰（session_key）等，之后就可以依據openid在后端生成用戶並綁定用戶行為。返回值是一個code，code是用戶登錄憑證（有效期五分鍾）。開發者需要在開發者服務器后台調用auth.code2Session，使用code換取openid、unionid、session_key等信息
wx.login({
success (res) {
if (res.code) {
//發起網絡請求
wx.request({
url: 'https://example.com/onLogin',
data: {
code: res.code
}
})
} else {
console.log('登錄失敗！' + res.errMsg)
}
}
})
這是微信官方提供的時序圖，在下面問題解決部分有對於此的應用。
- 獲取用戶資料信息
在之前可以通過wx.getUserInfo()函數配合login登錄后的狀態直接獲取用戶狀態，但在四月份微信調整接口使得getUserInfo()只能獲取到匿名用戶狀態，於是現在需要獲取用戶信息應調用wx.getUserprofile()函數。
getUserProfile(e) {
// 推薦使用wx.getUserProfile獲取用戶信息，開發者每次通過該接口獲取用戶個人信息均需用戶確認
// 開發者妥善保管用戶快速填寫的頭像昵稱，避免重復彈窗
wx.getUserProfile({
desc: '用於完善會員資料', // 聲明獲取用戶個人信息后的用途，后續會展示在彈窗中，請謹慎填寫
success: (res) => {
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
})
},
getUserInfo(e) {
// 不推薦使用getUserInfo獲取用戶信息，預計自2021年4月13日起，getUserInfo將不再彈出彈窗，並直接返回匿名的用戶個人信息
this.setData({
userInfo: e.detail.userInfo,
hasUserInfo: true
})
},
技術使用中遇到的問題和解決過程
- 由於是初學，在獲取登錄狀態以及登錄信息時都會踩坑，比如登錄完卻沒有記錄狀態等問題，有些接口需要登錄后才能調用，否則后端無法獲取正在訪問的用戶的信息，自然無法返回需要的數據，以下為我的解決方法可以參考。
做法是封裝userLogin函數，函數返回一個Promise對象，在調用別的函數時通過userInfo這個全局變量去判斷該用戶是否登錄，若尚未登錄則調用userLogin.then請求登錄,已登錄則可以直接獲取信息。
userLogin:function (e) {
let that=this;
let promise=new Promise(function (resolve,reject) {
let _that = that;
wx.login({
success: res => {
// 發送 res.code 到后台換取 openId, sessionKey, unionId
console.log(res.code);
console.log("登錄" + that.globalData.baseUrl);
request({
url: that.globalData.baseUrl + '/api/user/login',
method: 'POST',
data:
res.code,
success:function(respond)
{
that.globalData.userInfo=respond.data;
console.log("登錄成功");
console.log(respond);
that.globalData.userId = respond.data.data.id;
resolve(respond);
},
fail:function(respond)
{
// this.globalData.userInfo=res.data;
console.log("登錄失敗");
console.log(respond);
reject(respond);
}
})
}
})
})
return promise;
},
function(){
if(!app.globalData.userInfo){ //未登錄
userLogin
.then(this.action());
}
else //已登錄
this.action();
}
- 獲取用戶資料時一般應提供一個按鈕供用戶授權，點擊按鈕后會出現授權彈窗用戶允許后將返回一系列用戶信息，則可以在特定地方顯示，或者將其存儲進數據庫中
代碼如下可參考
<image class="avatar" bindtap="setAvatarUrl" src="{{url}}"> </image>
setAvatarUrl: function(e) {
wx.getUserProfile({
desc: '獲取用戶頭像等信息',
success: res => {
this.setData({
url: res.userInfo.avatarUrl
})
console.log(res)
},
fail: err => {
wx.showToast({
title: '失敗了',
icon: 'error'
})
}
})
},
總結
微信小程序確實是一種很便攜的工具，能夠實現快速開發。以上是我對於獲取用戶身份標識以及獲取用戶信息的方法的分享，在初次學習時容易遇到問題，查閱資料后也會存在疑惑，以上內容是我在踩坑后總結調整得到，希望能對讀者有所幫助，更多拓展的用法需要參考微信開發文檔。若有疑問，也可評論留言。