vue ＋ 微信獲取用戶信息
本次項目做到一個點贊功能，即分享出去一個頁面給微信好友，微信好友點開並點贊，需要將點贊用戶的微信暱稱，微信頭像以及微信openid，微信unionid（這個需要關注公衆號纔會有該字段）傳給後端，記錄點贊人的相關信息
- 微信公衆號網頁授權配置，詳見官網
- 關於網頁授權的兩種scope的區別說明 （詳細見官網）
－scope=snsapi_base 獲取微信用戶openid,獲取後直接跳轉業務頁面，不需要用戶操作
－scope=snsapi_userinfo 獲取微信用戶詳細信息（暱稱，頭像等），需要用戶手動點擊授權，當點擊允許時，會跳轉業務頁面（類似於關閉彈窗），點擊拒絕時會推出頁面，授權如圖： - ⚠️用戶管理類接口中的“獲取用戶基本信息接口”，是在用戶和公衆號產生消息交互或關注後事件推送後，才能根據用戶OpenID來獲取用戶基本信息。這個接口，包括其他微信接口，都是需要該用戶（即openid）關注了公衆號後，才能調用成功的。
-
分享頁面的實際鏈接：
⚠️ 當前頁面的鏈接需要 encodeURIComponent( url ) 編碼https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect // APPID: 公衆號的appid // REDIRECT_URI：當前頁面的鏈接，需要編碼 // scope： snsapi_base / snsapi_userinfo // 其他值均不用改動 - 點擊允許後跳轉的鏈接是 REDIRECT_URI + code=CODE&state=STATE。
⚠️ 此處的code可以用來調取接口獲取微信用戶的相關信息
⚠️ 每次用戶授權帶上的code將不一樣，code只能使用一次，5分鐘未被使用自動過期。
－官方說法code只能被使用一次，在H5頁面中，如果有跳轉的情況，再返回當前頁面，微信會判斷是否已經授權，如果授權過，則code返回的還是上一次的code，而你如果用code調取用戶信息（code已失效）會報 invalid code, hints: [ req_id: GGJbIz4ce-oGYwya ]，所以在第一次獲取用戶信息的時候就可以將該用戶信息存儲在本地 - 需要獲取用戶信息，且二次分享的問題
雖然當前頁面沒有問題，但是當前微信用戶使用微信進行二次分享，則微信會分享當前頁面的鏈接（不包含https://open.weixin.qq.com...），新用戶點擊則不會進行授權，但是微信的二次分享會在當前鏈接加上 &from＝ ，可以在vue created的生命週期裏進行參數獲取並判斷，如果有from參數，則跳轉 https://open.weixin.qq.com/co... 鏈接，讓用戶授權
⚠️ 二次分享樣式顯示問題可以查看我的另一篇文章 vue ＋ 微信二次分享／自定義分享
代碼如下
// created 週期
if(this.$route.query.from) { // 判斷鏈接中是否有from參數，下面的studentId，activityId項目需要
let _nowUrl = window.location.href.split('?')[0] + `?resource=1&studentId=${this.$route.query.studentId}&activityId=${this.$route.query.activityId}`
let _shareUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${encodeURIComponent(_nowUrl)}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`
window.location.href = _shareUrl
return
} // 處理微信用戶信息
handleWechatMsg(code) {
// 調取 獲取微信用戶信息的接口（後端參考微信官方文檔進行封裝） code－－參數
api.getWechatInfo(code).then((res)=>{
if(res.data.code == 200) {
// 返回的是json字符串
let _data = res.data.content
let _personMsg = JSON.parse(_data)
this.wechatMsg = _personMsg
// 本地存儲微信用戶信息，防止頁面被刷新，code失效
window.localStorage.setItem('wechatMesssage', _data)
} else if (res.data.code == 400) { // 400-code失效，400是後端返回，具體看後端返回哪個碼
let msgs = window.localStorage.getItem('wechatMesssage')
this.wechatMsg = JSON.parse(msgs)
} else {
this.$Message.message(res.data.message);
}
})
},- 如果需要獲取微信unionid,則需要引導用戶關注公衆號，可以在返回的用戶信息中判斷是否含有unionid，如果沒有，可以展示微信公衆號的二維碼，供用戶識別關注
⚠️－－－－－－－－－－－－－－－－－－－－
- 當前頁面的域名，需要在公衆號後臺配置添加（詳見官網）
- 如果頁面存在＃，可能會出問題，可以使用nginx進行配置