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

更新時(shí)間：2019年04月16日 09:58:11 作者：Panax

這篇文章主要介紹了在vue中獲取微信支付code及code被占用問(wèn)題的解決方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

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

總體分兩步
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 五分鐘變化一次；

如果沒(méi)有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)聽(tīng)物理返回鍵，跳到指定的頁(yè)面；雖然問(wèn)題暫時(shí)解決了，但是體驗(yàn)感覺(jué)不是很好，有種閃屏的感覺(jué)；

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

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

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

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

redirect_uri 回調(diào)地址中需要把特殊符號(hào)轉(zhuǎn)義掉，如果實(shí)在不知道可以百度在線(xiàn)轉(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ì)的用戶(hù)資料，

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

state=123 （隨便填）

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: