在vue中獲取微信支付code及code被占用問(wèn)題的解決方法

這個(gè)地方坑比較多，查看網(wǎng)上并沒有詳細(xì)的文檔，新手一般寫到這里很痛苦。這里我只介紹一下我解決的方案，雖然它不是最好的，但是可行的方案；

總體分兩步
1）跳到微信支付鏈接，它會(huì)自動(dòng)拼接上code
2）獲取本網(wǎng)址，截取code；

在vue中哪里獲取code？

在路由鉤子函數(shù)beforeEach獲取。（如果想了解beforeEach的用法，請(qǐng)關(guān)注我下一篇博客）。

我們?nèi)フ?qǐng)求微信網(wǎng)址"https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +appid +"&redirect_uri=" + spa +
"&response_type=code&scope=snsapi_base&state=123#wechat_redirect";

它會(huì)自動(dòng)帶上code ,我們?cè)谌ソ厝〉絚ode,把code 傳給后端，后端便可以拿到opinid.

如果是微信登錄，我們會(huì)去請(qǐng)求后臺(tái)驗(yàn)證接口驗(yàn)證是否登錄，拿到登錄返回信息，保存本地或者vuex；

如果是微信支付，我們同樣去請(qǐng)求后臺(tái)接口，此時(shí)code可能提示被占用，我們需要在beforeEach 中重新獲取一遍code，官方文檔說(shuō)code 五分鐘變化一次；

如果沒有if條件的判斷，它會(huì)反復(fù)跳正在登錄中（包括登錄的code獲取也是，誰(shuí)知道請(qǐng)留言告知一下），window.localStorage.getItem('realCode') 是定義在支付頁(yè)面。

這樣拿到code整個(gè)流程就通了。但是我們?nèi)カ@取code后，有時(shí)會(huì)用手機(jī)返回鍵，它又會(huì)跳到微信獲取code的那個(gè)網(wǎng)址，這樣就很煩了，只好在mounted鉤子函數(shù)監(jiān)聽物理返回鍵，跳到指定的頁(yè)面；雖然問(wèn)題暫時(shí)解決了，但是體驗(yàn)感覺不是很好，有種閃屏的感覺；

其中遇到的坑有：支付一閃而過(guò)

1）原因找了很多，像目錄是否配置正確，如：http://element.eleme.io/ 需寫成http://element.eleme.io/#/zh-CN/component/

2) 簽名錯(cuò)誤 這個(gè)沒辦法了。是后臺(tái)的方法寫錯(cuò)了，排查了好久；

還有一個(gè)坑就是請(qǐng)求網(wǎng)址的轉(zhuǎn)義問(wèn)題：

redirect_uri 回調(diào)地址中需要把特殊符號(hào)轉(zhuǎn)義掉，如果實(shí)在不知道可以百度在線轉(zhuǎn)義，把網(wǎng)址復(fù)制進(jìn)去就可以了；

redirect_uri的前綴http://不能省略

response_type=code （請(qǐng)求帶回來(lái)的code）

scope=snsapi_base snsapi_base只能獲取access_token和openID （靜默授權(quán)); snsapi_userinfo可以獲取更詳細(xì)的用戶資料，

比如頭像、昵稱、性別等(需要點(diǎn)擊授權(quán))

state=123 （隨便填）

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com