摘要:分享頁面的實際鏈接當前頁面的鏈接需要編碼公眾號的當前頁面的鏈接,需要編碼其他值均不用改動點擊允許后跳轉的鏈接是。此處的可以用來調取接口獲取微信用戶的相關信息每次用戶授權帶上的將不一樣,只能使用一次,分鐘未被使用自動過期。
</>復制代碼
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進行配置
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/54722.html
摘要:分享頁面的實際鏈接當前頁面的鏈接需要編碼公眾號的當前頁面的鏈接,需要編碼其他值均不用改動點擊允許后跳轉的鏈接是。此處的可以用來調取接口獲取微信用戶的相關信息每次用戶授權帶上的將不一樣,只能使用一次,分鐘未被使用自動過期。 vue + 微信獲取用戶信息 本次項目做到一個點贊功能,即分享出去一個頁面給微信好友,微信好友點開并點贊,需要將點贊用戶的微信昵稱,微信頭像以及微信openid,微信...
摘要:微信網頁授權,基于適配方案,開發的微信授權方案。項目地址又又又一次來寫微信網頁授權,一年前寫過的微信授權解決方案。 vue微信網頁授權,基于vue-cli3.0+webpack 4+vant ui + sass+ rem適配方案+axios,開發的微信授權方案。項目地址:vue-wechat-auth 又又又一次來寫微信網頁授權,一年前寫過的 [vue 微信授權解決方案]。 參考了[v...
摘要:接口注入權限接入微信接口的最主要也是最重要一步步就是填寫下面這些信息,填完這些信息之后,基本就好了。 寫在前面: 做微信的網頁基本上都要接入微信的sdk,我在做的時候,也頗費了一番功夫,然后就想記錄一下,供自己日后翻閱,以及讓有需要的朋友可以做一下參考,如果喜歡的可以點波贊,或者關注一下,希望可以幫到大家。 本文首發于我的個人blog:obkoro1.com 安裝sdk np...
摘要:但是在本次開發中,我只使用了,,個別微信版本分享出來的還是沒有圖片和文案,的是沒有問題,所以又加上了棄用的,之后,安卓機也可以正常分享。 微信二次分享/自定義分享 從App中使用App分享(一次分享) showImg(https://segmentfault.com/img/bVbp83T?w=593&h=278); 使用微信導航欄的分享(二次分享) --已做處理 showImg(...
閱讀 2567·2023-04-25 18:13
閱讀 783·2021-11-22 12:10
閱讀 2980·2021-11-22 11:57
閱讀 2143·2021-11-19 11:26
閱讀 2177·2021-09-22 15:40
閱讀 1467·2021-09-03 10:28
閱讀 2708·2019-08-30 15:53
閱讀 1955·2019-08-30 15:44