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

2022-11-10,,,,

开发背景:

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

项目描述:

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

项目思路:

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

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

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

知识点储备:

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

移动H5页面微信支付踩坑之旅(微信支付、单页面路由模拟、按钮加锁、轮询等常见功能)的相关教程结束。

《移动H5页面微信支付踩坑之旅(微信支付、单页面路由模拟、按钮加锁、轮询等常见功能).doc》

下载本文的Word格式文档,以方便收藏与打印。