移动H5页面微信支付踩坑之旅（微信支付、单页面路由模拟、按钮加锁、轮询等常见功能）

开发背景：

  .net混合开发的vue模板语法的单页面应用，所以不存在脚手架以及没有路由可以跳转。

项目描述：

　 需要写两个页面，在订单详情页需要点击“请输入手机号”进入手机号绑定页面，手机号绑定成功后自动跳转到订单详情页，如果该手机号已经绑定成功，则不显示“请输入手机号”（即不可点击进入下一个页面），只显示该手机号。

项目思路：

　　在单页面中使用v-show控制两个页面的切换，所以需要模拟真实两个页面的跳转，即改变hash值并且监听历史条目变化。

一、监听并且覆盖微信的回退事件

　当两个页面在同一路由下，从“手机号绑定”页面点击微信的返回时不会进入“确认订单”页面，会直接返回，所以通过在url尾部添加可以识别的hash值并且使用方法进行监听，以此判断回到哪个页面。

知识点储备：

关于window.onpopstate事件其实是popstate事件在 window对象上的事件处理程序。每当处于激活状态的历史记录条目发生变化时,popstate事件就会在对应window对象上触发.
因为给url加上了hash值虽然不会重新发出http请求但是会改变浏览器的访问历史。所以即使进入了“手机号绑定”页面，popstate也能监听到。