移动端扫码加购功能web实现以及遇到的各种问题整理

期间遇到一些比较头疼的的bug，也做一下整理，希望有遇到相同问题的朋友可以借鉴到
实现逻辑：
1、后端按照规范生成带有跳转地址和加购参数的二维码
2、app内扫描二维码跳转到指定的页面
3、跳转页面内判断地址中是否携带指定参数，若存在则调用接口走加购流程
流程不是很复杂，这里整理下遇到的几个坑
1.未登陆app，扫码跳转后会先跳转登陆页登陆后返回进行加购流程

** 这个问题主要牵扯 app token更新与web端token更换/登陆状态更新不及时的问题， 解决思路还是由 app端提供登录成功返回，在确保web端token更换/登陆状态更新后再执行加购逻辑

2.根据地址参数判断会出现离开页面返回后重复执行加购逻辑

** 这里实现思路是当离开页面时在离开路由钩子函数中将地址参数替换掉，这样保证离开再回来进的已经不是带加购参数的地址
下面附实现代码：

  beforeRouteLeave(to, from, next) {console.log('beforeRouteLeave ==========')if (this.paramId) {console.log('paramExist ==========')let state = { title: '', url: window.location.href };history.replaceState(state, '', '/cart?closewebview=1');}next()},

当页面离开前会判断是否当前是否加购逻辑的页面，若是则替换掉架构的参数后再跳转路由

3.因为加购逻辑之前进入页面就会调用刷新页面的接口，加购逻辑后依然要调用，造成两次刷新间隔过短后端使用缓存数据返回造成前端数据不准确
** 实现思路就是页面进入时判断是否有加购的参数，有的话进入页面不刷新，加购完成后刷新

4.扫码进的页面会出现 router.back() 或者 history.back() 失效的问题
** 这里通过地址中加了 closewebview判断，通过直接调用app的方法关闭webview实现

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！