Vue单页在微信公众号支付里遇到的坑

Vue单页在微信公众号支付里遇到的坑

微信公众平台注册地址与目标地址不准确

1、由于VUE是单页应用，并且我们用的是nuxt框架，nuxt的mode模式是history模式，并不是hash模式。所以，地址是单一的。
2、当微信链接已进入页面的时候，只会记住当前页面的地址，例如：进如页面的路径是：商城首页=>商品详情页=>填写订单页（订单页是在商户平台注册的地址即目标地址）。
3、当所有的准备都没有问题的时候，在微信支付的时候，微信支付怎么都调不起来，并且页面会报一个错误提示： 商城首页链接 未注册，我在想，当前页面是填写订单页，为什么提示商城首页链接未注册呢？后来，猜测，微信在第一次进入的时候，页面只记住了商城首页的地址，商品详情页的地址微信根本不认识，于是，在商品详情页手动刷新，再支付，就能顺利的调起支付了。如何解决，微信不认识当前地址的问题呢？
4、后来试了一些办法，最后选定location.href来强制跳转到填写订单页，这是能达到我们的预期，但是～～～
5、后来在做测试的时候，测试提了一个很蛋疼的bug。点击微信返回的时候，我们的预期返回地址是：填写订单页=>商品详情页=>商城首页，但是真实的返回地址是：填写订单页=>商城首页，这不是我们想要的。为什么会出现这种问题呢？
6、因为我们在用location.href做跳转的时候，会将nuxt的数据全部清除掉，所以在返回的时候只能记住第一次进来的商城首页。
7、最后到项目上线也没能改掉这个bug

nuxt微信支付项目学到的知识点

1、window.history.pushState() 记录页面的history
2、this.$nextTick(()=>{})，(1)、在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中，(2)、在数据变化后要执行的某个操作，而这个操作需要使用随数据改变而改变的DOM结构的时候，这个操作都应该放进Vue.nextTick()的回调函数中
3、async和await，异步操作，

微信公众号支付，两种支付api

1、第一种是WeixinJSBridge.invoke，是在微信浏览器里面打开H5网页中执行JS调起支付。接口输入输出数据格式为JSON。具体的开发文档如下链接：
https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7&index=6
2、第二种是wx.chooseWXPay，https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115
3、二者的比较，WeixinJSBridge.invoke不需要引入jssdk，wx.chooseWXPay需要引入，当前这两者都可以用，但是在实际的开发过程中用哪一个比较好呢，下面我们来做一个比较。
(1)、在做公众号支付的时候，一般用ios手机做调试，因为Android的微信版本不会有报错，
(2)、还在开发调研阶段，最好用WeixinJSBridge.invoke做调试，因为wx.chooseWXPay不会报错，例如，如果当前地址未注册，wx.chooseWXPay的表现形式是调不起微信支付，并且不会有任何反应，WeixinJSBridge.invoke则会直接显示错误的类型。
(3)、当各个环节都正确的时候，还是可以用回wx.chooseWXPay，因为wx.chooseWXPay里面封装了WeixinJSBridge.invoke，并且有成功和失败的回调，更加适合我们程序做处理。
(4)、具体的区别可以见如下链接：https://www.2cto.com/weixin/201507/412752.html