本次項(xiàng)目做到一個(gè)點(diǎn)贊功能，即分享出去一個(gè)頁(yè)面給微信好友，微信好友點(diǎn)開(kāi)并點(diǎn)贊，需要將點(diǎn)贊用戶(hù)的微信昵稱(chēng)，微信頭像以及微信openid，微信unionid（這個(gè)需要關(guān)注公眾號(hào)才會(huì)有該字段）傳給后端，記錄點(diǎn)贊人的相關(guān)信息

創(chuàng)新互聯(lián)堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：網(wǎng)站設(shè)計(jì)制作、做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶(hù)于互聯(lián)網(wǎng)時(shí)代的寬甸網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

微信網(wǎng)頁(yè)授權(quán)

1、微信公眾號(hào)網(wǎng)頁(yè)授權(quán)配置，詳見(jiàn)官網(wǎng)

2、關(guān)于網(wǎng)頁(yè)授權(quán)的兩種scope的區(qū)別說(shuō)明 （詳細(xì)見(jiàn)官網(wǎng)）

－scope=snsapi_base 獲取微信用戶(hù)openid,獲取后直接跳轉(zhuǎn)業(yè)務(wù)頁(yè)面，不需要用戶(hù)操作

－scope=snsapi_userinfo 獲取微信用戶(hù)詳細(xì)信息（昵稱(chēng)，頭像等），需要用戶(hù)手動(dòng)點(diǎn)擊授權(quán)，當(dāng)點(diǎn)擊允許時(shí)，會(huì)跳轉(zhuǎn)業(yè)務(wù)頁(yè)面（類(lèi)似于關(guān)閉彈窗），點(diǎn)擊拒絕時(shí)會(huì)推出頁(yè)面，授權(quán)如圖：

⚠️

3、用戶(hù)管理類(lèi)接口中的“獲取用戶(hù)基本信息接口”，是在用戶(hù)和公眾號(hào)產(chǎn)生消息交互或關(guān)注后事件推送后，才能根據(jù)用戶(hù)OpenID來(lái)獲取用戶(hù)基本信息。這個(gè)接口，包括其他微信接口，都是需要該用戶(hù)（即openid）關(guān)注了公眾號(hào)后，才能調(diào)用成功的。

4、分享頁(yè)面的實(shí)際鏈接：

⚠️ 當(dāng)前頁(yè)面的鏈接需要 encodeURIComponent( url ) 編碼

https://open.weixin.qq.com/connect/oauth3/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect
// APPID: 公眾號(hào)的appid
// REDIRECT_URI：當(dāng)前頁(yè)面的鏈接，需要編碼
// scope： snsapi_base / snsapi_userinfo
// 其他值均不用改動(dòng)

5、點(diǎn)擊允許后跳轉(zhuǎn)的鏈接是 REDIRECT_URI + code=CODE&state=STATE。

⚠️ 此處的code可以用來(lái)調(diào)取接口獲取微信用戶(hù)的相關(guān)信息

⚠️ 每次用戶(hù)授權(quán)帶上的code將不一樣，code只能使用一次，5分鐘未被使用自動(dòng)過(guò)期。

－官方說(shuō)法code只能被使用一次，在H5頁(yè)面中，如果有跳轉(zhuǎn)的情況，再返回當(dāng)前頁(yè)面，微信會(huì)判斷是否已經(jīng)授權(quán)，如果授權(quán)過(guò)，則code返回的還是上一次的code，而你如果用code調(diào)取用戶(hù)信息（code已失效）會(huì)報(bào) invalid code, hints: [ req_id: GGJbIz4ce-oGYwya ]，所以在第一次獲取用戶(hù)信息的時(shí)候就可以將該用戶(hù)信息存儲(chǔ)在本地

6、需要獲取用戶(hù)信息，且二次分享的問(wèn)題

雖然當(dāng)前頁(yè)面沒(méi)有問(wèn)題，但是當(dāng)前微信用戶(hù)使用微信進(jìn)行二次分享，則微信會(huì)分享當(dāng)前頁(yè)面的鏈接（不包含https://open.weixin.qq.com），新用戶(hù)點(diǎn)擊則不會(huì)進(jìn)行授權(quán)，但是微信的二次分享會(huì)在當(dāng)前鏈接加上 &from＝ ，可以在vue created的生命周期里進(jìn)行參數(shù)獲取并判斷，如果有from參數(shù)，則跳轉(zhuǎn)https://open.weixin.qq.com/co... 鏈接，讓用戶(hù)授權(quán)
⚠️ 二次分享樣式顯示問(wèn)題可以查看我的另一篇文章vue ＋ 微信二次分享／自定義分享

代碼如下

// created 周期
if(this.$route.query.from) { // 判斷鏈接中是否有from參數(shù)，下面的studentId，activityId項(xiàng)目需要
 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/oauth3/authorize?appid=${appId}&redirect_uri=${encodeURIComponent(_nowUrl)}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`
 window.location.href = _shareUrl
 return
}

 // 處理微信用戶(hù)信息
 handleWechatMsg(code) {
  // 調(diào)取 獲取微信用戶(hù)信息的接口（后端參考微信官方文檔進(jìn)行封裝）  code－－參數(shù)
  api.getWechatInfo(code).then((res)=>{
   if(res.data.code == 200) {
    // 返回的是json字符串
    let _data = res.data.content
    let _personMsg = JSON.parse(_data)
    this.wechatMsg = _personMsg
    // 本地存儲(chǔ)微信用戶(hù)信息，防止頁(yè)面被刷新，code失效
    window.localStorage.setItem('wechatMesssage', _data)
   } else if (res.data.code == 400) { // 400-code失效，400是后端返回，具體看后端返回哪個(gè)碼
    let msgs = window.localStorage.getItem('wechatMesssage')
    this.wechatMsg = JSON.parse(msgs)    
   } else {
    this.$Message.message(res.data.message);
   }

  })
 },

如果需要獲取微信unionid,則需要引導(dǎo)用戶(hù)關(guān)注公眾號(hào)，可以在返回的用戶(hù)信息中判斷是否含有unionid，如果沒(méi)有，可以展示微信公眾號(hào)的二維碼，供用戶(hù)識(shí)別關(guān)注

⚠️－－－－－－－－－－－－－－－－－－－－

1. 當(dāng)前頁(yè)面的域名，需要在公眾號(hào)后臺(tái)配置添加（詳見(jiàn)官網(wǎng)）
2. 如果頁(yè)面存在＃，可能會(huì)出問(wèn)題，可以使用nginx進(jìn)行配置

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

本文標(biāo)題：vue實(shí)現(xiàn)微信獲取用戶(hù)信息的方法
URL鏈接：http://vcdvsql.cn/article0/pdshio.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、動(dòng)態(tài)網(wǎng)站、網(wǎng)站排名、全網(wǎng)營(yíng)銷(xiāo)推廣、手機(jī)網(wǎng)站建設(shè)、網(wǎng)站維護(hù)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)