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

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

在vue中哪里獲取code？

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

我們?nèi)フ埱笪⑿啪W(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";

它會自動帶上code ,我們在去截取到code,把code 傳給后端，后端便可以拿到opinid.

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

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

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

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

其中遇到的坑有：支付一閃而過

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

2) 簽名錯誤 這個沒辦法了。是后臺的方法寫錯了，排查了好久；

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

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

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

response_type=code （請求帶回來的code）

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

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

state=123 （隨便填）

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

最新評論