简单在这里记录一下微信支付的大概流程 ，不怎么精细 有点粗糙
一、获取openId
1、在微信公众平台配置相关信息，具体按照微信官方文档步骤进行配置
文档地址：https://developers.weixin.qq.com/doc/offiaccount/Getting_Started/Overview.html
2、微信网页授权
（1）第一步获取code
| 参数 | 是否必填 | 说明 |
|---|---|---|
| appid | 是 | 公众号唯一标示，可以登录公众平台查看 |
| redirect_uri | 是 | 授权后重定向的回调链接地址（一般都是网站的首页，看具体的业务逻辑，重定向后会携带code），需要对url进行urlEncode处理（可urlEncode的网站：tool.chinaz.com/Tools/urlen… |
| response_type | 是 | 返回类型,填写code（即此位置参数无需修改） |
| scope | 是 | 填写snsapi_base或snsapi_userinfo。说明：snsapi_base （不弹出授权页面，直接跳转，只能获取用户openid），snsapi_userinfo （弹出授权页面，可通过openid拿到昵称、性别、所在地。并且， 即使在未关注的情况下，只要用户授权，也能获取其信息 ） |
| state | 否 | 重定向后会带上state参数，开发者可以填写a-zA-Z0-9的参数值，最多128字节（根据具体业务需求来定） |
| #wechat_redirect | 是 | 无论直接打开还是做页面302重定向时候，必须带此参数 |
构建完上面的url之后，widows.location.href = 上面构建的url
如果参数填写都正确，微信授权成功之后会返回redirect_uri对应的url链接，并携带参数code
如果state也填上了，就会带上state参数 所以重定向后的url将会是：xxx.xxx.xxx?code=xxxxxx&state=xxx 这时候我们就可以拿到code了。
（2）通过code换取网页授权access_token
所以前端负责拿到code，把code传给后台，后台在用code请求微信获取access_token的接口，请求正确时微信会返回access_token，同时也会返回openid，
二、使用JSSDK
微信JS-SDK说明文档:
文档地址：https://developers.weixin.qq.com/doc/offiaccount/Getting_Started/Overview.html
先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
备注：登录后可在“开发者中心”查看对应的接口权限
2、引入JS文件
H5项目使用微信sdk
在需要调用JS接口的页面引入如下JS文件
<script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
vue.js 项目使用微信sdk
安装微信sdk
npm install weixin-js-sdk --save
引入微信sdk（这里我是在一个js文件里面引入微信sdk）
import wx from 'weixin-js-sdk'
通过config接口注入权限配置
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，
//若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: '', // 必填，公众号的唯一标识
timestamp: 0, // 必填，生成签名的时间戳
nonceStr: '', // 必填，生成签名的随机串
signature: '',// 必填，签名
jsApiList: [] // 必填，需要使用的JS接口列表
});
| 参数 | 说明 |
|---|---|
| debug | 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印 |
| appId | 必填，公众号的唯一标识，在公众平台可以查询 |
| timestamp | 必填，生成签名的时间戳 |
| nonceStr | 必填，生成签名的随机串 |
| signature | 必填，签名，可查看JS-SDK使用权限签名算法 微信JS-SDK说明文档 17 附录1 |
| jsApiList | 必填，需要使用的JS接口列表，可查看微信JS接口列表: 微信JS-SDK说明文档 16 附录2 |
三、调用微信支付接口
在发起支付请求前确保设置好支付目录
官方文档：JSAPI支付步骤:https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_3
发起一个微信支付请求：微信JS-SDK说明文档 :https://developers.weixin.qq.com/doc/offiaccount/Getting_Started/Overview.html
wx.chooseWXPay({
timestamp: 0, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
nonceStr: '', // 支付签名随机串，不长于 32 位
package: '', // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
signType: '', // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
paySign: '', // 支付签名
success: function (res) {
// 支付成功后的回调函数,处理项目的业务逻辑
}
});
和注入权限配置同理，这些参数除了回调函数以外都需要后台生成和调用微信接口获取，具体可以看微信支付的业务流程
微信支付业务流程：https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_4
前端对接微信支付的步骤就是这样子，还有后台的一些逻辑，因为主要是做前端的 后台的逻辑很多也不太懂，所以很多和后台相关的都没有写