vue微信公众号、H5微信支付

我会带着你远行 2021-11-26 22:44 738阅读 0赞

**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:**

**![1575278-20190525155801170-290158869.png][]**

**然后使用getQueryString("code")便可以获取到code，再传给后台：**

![1575278-20190525160821185-153065677.png][]

** **

** 通过code获取后台返回的信息唤起支付就OK了。**

![1575278-20190525161007483-1773755931.png][]

注意的是， **`https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect进行支付页面定向，要注意vue开发的路由带#问题`**

转载于:https://www.cnblogs.com/lwming/p/10922793.html

[1575278-20190525155801170-290158869.png]: /images/20211126/79142d918aaa454b97b09ff0d166f605.png
[1575278-20190525160821185-153065677.png]: /images/20211126/37f6c9bde4b5480b89c35c451f5ff6ce.png
[1575278-20190525161007483-1773755931.png]: /images/20211126/804b7d397314469ead47ef39c0be262b.png