二维码扫码跳转&页面重定向

标签： 二维码 页面重定向 vue 移动端 混合开发

---

总结

• 本质：手机app扫码本质是访问二维码携带对应链接。
• 部分app对相关二维码可以定制一定的规范，比如用丰*App扫定制二维码，会打开对应微服务（H5）指定页面
• url中的参数携带特殊符号需要encode加密处理。

踩过的坑

• 获取参数问题：微信扫码打开对应微服务时，以截取路径是否携带相关参数判断此时打开微服务方式(正常打开还是扫码打开)。基于vue，在mounted时调用方法，通过this.$route.query.params获取路由对应参数作为判断标准，结果跟预测的不一样，如果原来路由params为空，那么不管扫码还是正常打开，通过this.$route.query.params依旧为空。

  • 解决办法：调用window.location获取url信息，再根据window.location.search //(返回url查询部分)获取参数。
  • 原因：混淆vue前端路由所带参数与二维码url路径携带参数的概念。二维码携带url信息规则如xxx:meal.index.html#/home/80003040?params=...//params为二维码携带参数信息,80003040为vue路由携带参数信息。而一般vue中路由之间跳转携带参数一般是通过编程式导航this.$router.push({path:'home',query:{workId:xxx }})//vue中路由为/home?workId=xxx而扫码后url为xxx:meal.index.html/home(待验证)。

• 参数带@ * / : 等特殊符号问题：url参数带特殊符号会使得参数丢失或者获取参数失败。比如参数本身设计为一个重定向跳转地址，类似http://mc.meal.com/sf/xxx

  • 解决办法：encodeURIComponent(url)对参数进行加密，转换特殊字符，获取参数解码调用decodeURIComponent(url)解码。特殊字符转换方法详情参考
  • 原因：首次遇到此类问题。

• 页面重定向问题：获取Url参数，解码参数Url后，前端进行页面重定向，问题：开始用ajax形式即vue中this.$axios.get/post(...)直接访问重定向url并且传递参数，重定向失败。

  • 解决办法：直接在解码后的url拼接参数调用window.location.href=url方法跳转。
  • 原因：重定向请求返回的不是json格式数据而是返回整个html页面即重定向展示的页面。

• 备注：个人记录，如内容有误的地方，欢迎批评指正

转载于:https://juejin.im/post/5ae449ad518825671f2f887d