微信公衆號、H5微信支付(Vue版)

 

1.H5微信支付

後臺會返回一個URL,前端直接跳轉就OK(需要你傳給後臺一個ip,必須保證在同一域名下)

使用window.location.href =res.data;進行頁面跳轉到支付界面(res.data)爲後臺返回的鏈接,

2.微信公衆號支付

爲了喚起支付,首先這裏需要我們做兩件事,第一去配置jsapi域名,第二配置微信網頁授權的回調域名,。

構建微信授權的url :  https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect 


 

code說明 : code作爲換取access_token的票據,每次用戶授權帶上的code將不一樣,code只能使用一次,5分鐘未被使用自動過期。

用戶微信登錄授權以後回調過來的URL 會攜帶兩個參數 ,第一個是code,另一個就是 state(所傳的參數)。我們需要將code獲取到然後傳給後端,後端通過code 獲取用戶基本信息。
後端得到code 以後,獲取用戶基本信息,並返回相關其他信息給前端,前端獲取到然後做其他事。

 

 獲取code:

然後使用getQueryString("code")便可以獲取到code,再傳給後臺:

 

 通過code獲取後臺返回的信息喚起支付就OK了。

 

 注意的是, https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect進行支付頁面定向,要注意vue開發的路由帶#問題

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章