只含前端操作!1鸷椤叨恨!只含前端操作!M诙狻痒钝!只含前端操作!A《尽送矩!
首先,最先做的就是配置你的回調(diào)域名哪替,這里直接上圖(開(kāi)通公眾號(hào)這里不做贅述栋荸,畢竟只從事前端開(kāi)發(fā)工作)
公眾號(hào)開(kāi)發(fā)指南鏈接https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html
配置好回調(diào)域名以后,為了獲取code凭舶,需要打開(kāi)如下頁(yè)面:
https://open.weixin.qq.com/connect/oauth2/authorize?appid=你的公眾號(hào)appid&redirect_uri=你想打開(kāi)的地址首頁(yè)&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect
如果用戶同意授權(quán)蒸其,頁(yè)面將跳轉(zhuǎn)至 redirect_uri/?code=CODE&state=STATE。
mounted()?{
????if(!window.localStorage.getItem('code')){?//?如果緩存localStorage中沒(méi)有微信openId库快,則需用code去后臺(tái)獲取
??????this.getCode()
????}?else?{
????????// 你的業(yè)務(wù)需求代碼
????}
??},
getCode?()?{?//?非靜默授權(quán),第一次有彈框
??????this.code?=?'';
??????var?local?=?window.location.href;//?獲取頁(yè)面url
??????var?appid?=?'你的公眾號(hào)appid';
??????this.code?=?this.getUrlCode().code;?//?截取code
??????console.log(this.code);
??????if?(this.code?==?null?||?this.code?===?'')?{?//?如果沒(méi)有code钥顽,則去請(qǐng)求
??????????window.location.href?=?`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=你想打開(kāi)的地址首頁(yè)&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect`
??????}?else?{
??????????localStorage.setItem('code',?this.code);
??????}
????},
????getUrlCode()?{?//?截取url中的code方法
??????var?url?=?location.search
??????this.winUrl?=?url
??????var?theRequest?=?new?Object()
??????if?(url.indexOf("?")?!=?-1)?{
????????var?str?=?url.substr(1)
????????var?strs?=?str.split("&")
????????for(var?i?=?0;?i?<?strs.length;?i?++)?{
??????????theRequest[strs[i].split("=")[0]]=(strs[i].split("=")[1])
????????}
??????}
????????return?theRequest
????},
當(dāng)你成功獲取到code之后义屏,把code傳給后端 之后就與前端無(wú)關(guān)了,因?yàn)閺牡诙介_(kāi)始蜂大,操作都得在服務(wù)端進(jìn)行
把code通過(guò)后端給你的接口傳給他 等著后端傳給你用戶相關(guān)數(shù)據(jù)就好了