这个是公司去年十二月份的商城项目，主要是在微信浏览器中使用微信支付，实际的操作流程是：用户下单 > 前端调起微信内H5支付JSAPI > 获取支付返回 > 展示状态。
看起来流程很简单，实际上各种踩坑。
坑1：微信支付设置的是支付目录
微信支付（公众号接入支付）模块，开发步骤一需要设置支付目录：
请确保实际支付时的请求目录与后台配置的目录一致（现在已经支持配置根目录，配置后有一定的生效时间，一般5分钟内生效），否则将无法成功唤起微信支付。
在微信商户平台（pay.weixin.qq.com）设置您的JSAPI支付支付目录，设置路径：商户平台-->产品中心-->开发配置，如图7.7所示。JSAPI支付在请求支付的时候会校验请求来源是否有在商户平台做了配置，所以必须确保支付目录已经正确的被配置，否则将验证失败，请求支付不成功。
由上图可知：
- 公众号支付绑定的是
请求目录，不是具体请求地址 - 一个公众号只能绑定5个目录
**解决方法
所以在开发时，尽量把下单页面写在同一个目录下（或下单方法写在一个通用页面中）。
坑2：支付配置路径问题
我采取的方法是下单方法写在同一个页面，所以我在做下单操作时，要跳转到支付页面，假设我的地址是#/medicaservice/wxPay?orderCode=（Vue-router使用的是hash模式），那么我只需要在提交订单成功后跳转即可。
但是这时候，坑来了，该商城是具有分享功能的，用户可以通过扫二维码进入商城下单，这时候，IOS和Android的区别就来了。
用安卓手机测试，扫二维码 > 进入商城 > 下单 > 支付，这个操作是没有问题的，但是如果是苹果的话，会跳出“支付路径不合法”。
因为微信确认合法路径的时候，IOS记录的是第一次载入时的页面路径，而Android则取的是当前页面路径，所以会导致在苹果手机会显示路径不合法。
解决方法：
发起支付时判断该设备为IOS或是Android，如果是IOS，则将跳转地址改成?#/medicaservice/wxPay?orderCode=，在路由的#前面加个?号，微信浏览器就会把后面的路由当成参数过滤掉了。
然后在跳转到支付页面的时候，我使用了window.location.href而不是this.$router.push，因为在部分机型下，真机测试会无法跳转，至今不知道为啥，有知道的大佬麻烦给小弟讲解一下。
网友评论