最近公司项目准备上线，楼主（前端）这边做了一个微信公众号（还是h5，我到现在也不知道叫啥）支付的功能，反正就是 这个，代码很少，很简单，但是，坑巨多！
先说一下微信支付的基本流程（官方叫业务流程），这里是官方文档写的很仔细，一定要仔细看，理解了，才好写代码。
大致的意思，就是微信用户点击网址或者扫描二维码进入商品页面选购商品（这个页面前端来写没什么好说的）
1.点击支付（这时候带着商品参数例如数量，单价等去请求自己的后台接口）
2.接受后台的返回值（appId，timeStamp，nonceStr，package，signType，paySign）
3.把后台返回过来的这些参数作为参数去请求微信接口调出支付（这里有前端调出支付框的代码）
4.调出支付窗口代表成功了，流程结束。
看起来很清晰对不对，但是坑从现在就开始了。下面具体列出坑的地方：
1.微信支付后台涉及到获取code和openid，但是呢，这个code前端也可以获取（最好还是后台来获取，如果前端获取有坑，这个我们后面再说），如果后台非要你获取的话，那么步骤是酱紫的：
（1）首先需要3个页面，一个选购商品页面（我们这里叫pay.html），一个确认支付页面（我们这里叫paySure.html，大致内容就是把用户选购的商品都列在这个页面上，标上数量和单价还有总价，在弄一个立即支付按钮，这个按钮就是用来调起微信支付的），一个redirect_uri跳转页面（我们这里叫redirect.html，微信要求的，这个页面不需要样式，随意）
（2）首先选购商品页面（pay.html）选好商品之后，通过
window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=自己商户的appid&redirect_uri=你自己的redirect.html地址&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect' 这个链接跳转到redirect页面并且获取到code。
这个网址看起来很头痛，但是仔细分析一下主要就是以下几个参数。
https://open.weixin.qq.com/connect/oauth2/authorize是固定的请求微信的地址，没什么好说的，是写死的；
appid是公司的appid，谁管理微信商户后台，问谁要就可以，是固定写死的；
redirect_uri就是我们用来获取code的页面，这里填你自己的redirect.html页面地址；
esponse_type=code是固定写死的不用管；
scope=snsapi_base这里有点说法，scope是获取用户的授权，主要分为两种方式，一种是snsapi_base，这样的话是静默授权，就是在用户感觉不到的情况下获取用户的openid，但是获取不到头像等等。另一种是snsapi_userinfo，这样的话需要用户点击同意授权按钮才能获得用户信息（openid，头像，用户名等等），这两种方式根据需求选择；
后面的两个参数是固定的不用管，至此这个链接就完事了。
通过这个链接我们跳到了redirect.html页面，在这个页面上微信已经把code拼在了URL上，前端去截取就可以了，然后把code存在localstorage或者sessionStorage都可以，然后再window.location.href=‘’的形式跳转到确认支付页面（paySure.html）。整个跳转的过程pay->redirect->paySure大概1s左右，跳转是前端写的，用户是无法操作的。
至此我们获取了code，后台需要你在什么时候传给他，你就什么时候传给他。
2.我们在做微信支付的时候，只能用微信开发者工具去调试，开发者工具控制台总会报错"chooseWXPay:fail, the permission value is offline verifying"？但是微信文档中又没有这个错误，这怎么办？莫方
在开发者工具调试的时候，如果到最后唤起支付的那一步，弹出报错窗口（是啥我忘了，好像是undefined），并且控制台报错"errMsg":"chooseWXPay:fail, the permission value is offline verifying"（见下图）
不要慌，这就是坑，开发者工具唤不起微信支付窗口，但是又不给正确的错误提示（坑爹），这个时候我们去真机测试，就好了（这个错误还有另外一个坑我们下面再说）。
3.这里就是第三个坑了，我们把代码放在本地测试的时候可能顺风顺水，一切看起来都没问题，但是把页面放在服务器上，css文件夹js文件夹img文件夹都齐全，微信开发者工具又报错"chooseWXPay:fail, the permission value is offline verifying"，并且这个时候真机测试也不好用了？？？！
不要慌，这就是服务器文件地址的坑。我们正常放的话，肯定是在服务器上建一个文件夹，比如叫做wechatPay，然后把css，js，img文件夹和html文件放进去，但是事实上我们应该再建一个文件夹，单独把paySure.html放进去，让paySure文件单独在一个文件夹里面，不能有任何其他的文件和他共存，原因我也看不太懂，反正大意是这样的，详见 这里 。
我的服务器地址就是这样的：
4.上面的坑都踩过了，后台js支付授权目录也按照微信提示的规则配好了，但是还是报错"chooseWXPay:fail, the permission value is offline verifying"，这是为森么？？！
第四个坑又来了，在微信商户平台配置js支付授权目录的时候，微信后台提示，支付地址要填写到最后一级并且以 / 结尾。但是实际上如果以 / 结尾了，很大可能就是又报上面的错了，最后一通神查资料，原来是地址最后面啥也不加…………不用加 / …………我……
所以最后我们配的微信商户平台js授权支付地址格式是这样的：https://www.xianglianche.com/pay/paySure
5.接下来说为什么不太建议前端去获取code
前端获取code是在redirect.html页面获取的，但是这个redirect.html页面是没有其他作用的，所以还要跳转到确认支付页面，这个时候code就已经获得到了，但是如果用户这个时候不选择支付，而是出去做了些其他的什么事情，过了5分钟甚至半个小时才想起支付，那么code有可能就过期了，用户这个时候点击支付就会支付失败。
另一个原因是如果用户点击支付，调出了微信支付付款密码框，发现太贵了，想减少几个商品，这个时候他就会叉掉微信支付的框框，但是如果他叉掉了之后又觉得商品还都挺值得的，一狠心一跺脚决定还是买吧，这个时候点击支付的话，完，又支付失败，code在第一次支付取消的时候就已经使用过一次了，早就过期了，所以支付还是不成功。
这就是为什么不建议前端去获取code的两个原因，取到的code不及时，总是会过期，太影响用户体验，如果后台去获取的话，只需要在用户点击支付的那一步统一去获取code和openid就可以了，即使用户取消了支付，再点击一次支付，后台也是再去获取一次，即取即用，永远不会存在过期的情况。
6.这不太属于微信支付了，但是还是再次提醒菜鸟选手：不同页面存取localstorage操作，线上地址一定要写对，http就都是http，https就都是https，如果稍有不慎少加了一个s，那么localstorage存在了不同的地址就取不到localstorage了，而且还找不到原因……真想打死自己……
好啦，到此微信支付遇到的坑就都写出来了，为了弄这支付真的费劲了我的心血，资料查了无数，坑踩了超多，浪费了超多时间，死了无数脑细胞，希望能给大家一个借鉴，让大家在开发的时候少踩些坑。
如果错误，欢迎指正。