本次項目做到一個點贊功能,即分享出去一個頁面給微信好友,微信好友點開并點贊,需要將點贊用戶的微信昵稱,微信頭像以及微信openid,微信unionid(這個需要關注公眾號才會有該字段)傳給后端,記錄點贊人的相關信息
微信網頁授權
1、微信公眾號網頁授權配置,詳見官網
2、關于網頁授權的兩種scope的區別說明 (詳細見官網)
-scope=snsapi_base 獲取微信用戶openid,獲取后直接跳轉業務頁面,不需要用戶操作
-scope=snsapi_userinfo 獲取微信用戶詳細信息(昵稱,頭像等),需要用戶手動點擊授權,當點擊允許時,會跳轉業務頁面(類似于關閉彈窗),點擊拒絕時會推出頁面,授權如圖:
⚠️
3、用戶管理類接口中的“獲取用戶基本信息接口”,是在用戶和公眾號產生消息交互或關注后事件推送后,才能根據用戶OpenID來獲取用戶基本信息。這個接口,包括其他微信接口,都是需要該用戶(即openid)關注了公眾號后,才能調用成功的。
4、分享頁面的實際鏈接:
⚠️ 當前頁面的鏈接需要 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// 其他值均不用改動
5、點擊允許后跳轉的鏈接是 REDIRECT_URI + code=CODE&state=STATE。
⚠️ 此處的code可以用來調取接口獲取微信用戶的相關信息
⚠️ 每次用戶授權帶上的code將不一樣,code只能使用一次,5分鐘未被使用自動過期。
-官方說法code只能被使用一次,在H5頁面中,如果有跳轉的情況,再返回當前頁面,微信會判斷是否已經授權,如果授權過,則code返回的還是上一次的code,而你如果用code調取用戶信息(code已失效)會報 invalid code, hints: [ req_id: GGJbIz4ce-oGYwya ],所以在第一次獲取用戶信息的時候就可以將該用戶信息存儲在本地
6、需要獲取用戶信息,且二次分享的問題
雖然當前頁面沒有問題,但是當前微信用戶使用微信進行二次分享,則微信會分享當前頁面的鏈接(不包含https://open.weixin.qq.com),新用戶點擊則不會進行授權,但是微信的二次分享會在當前鏈接加上 &from= ,可以在vue created的生命周期里進行參數獲取并判斷,如果有from參數,則跳轉https://open.weixin.qq.com/co... 鏈接,讓用戶授權
⚠️ 二次分享樣式顯示問題可以查看我的另一篇文章vue + 微信二次分享/自定義分享
新聞熱點
疑難解答