开发单页应用(SPA)时候遇到的微信支付授权目录的坑

原文摘自:http://www.tuicool.com/articles/mQ7RRfb

       项目中要在微信底下开发单页应用(SPA),前端技术选型用的vuejs+vue-router,vue-router使用hashbang模式(使用hashbang也是为了避免微信jssdk的wx.config签名的坑)。在调用微信支付的时候遇到提示“URL未注册”,这通常是因为没有在微信支付后台正确配置授权目录的问题,但我所遇到的并非如此。

我们的应用中有3个页面用到微信支付:

http://example.com/#!/cart/index

http://example.com/#!/order/orderlist

http://example.com/#!/order/orderinfo

       微信支付允许配置3个目录为授权目录,另外允许配置一个测试环境目录,授权目录必须配置到最后一级目录,配置在根目录不行。到这里其实还都不是问题,问题是微信判断当前路径的方式。

       我们先定义两个名词:首先把当前页面叫做“Current Page”;当我们从微信别的地方点击链接呼出微信浏览器时所落在的页面、或者点击微信浏览器的刷新按钮时所刷新的页面,我们叫做“Landing Page”。举个例子,我们从任何地方点击链接进入页面A,然后依次浏览到B、C、D,那么Current Page就是D,而Landing Page是A,如果此时我们在D页面点击一下浏览器的刷新按钮,那么Landing Page就变成了D(以上均是在单页应用的环境下,即以hashbang模式通过js更改浏览器路径,直接href跳转的不算)。

问题来了,在ios和安卓下呼出微信支付的时候,微信支付判断当前路径的规则分别是:

IOS:Landing Page

安卓:Current Page

       这个规则是我试了N次试出来的,非常的坑,这就意味着,在ios环境下,任何一个页面都有可能成为支付页面(因为我无法预知和控制用户在哪个页面点微信浏览器的刷新按钮,或是用户通过哪个连接从外部进入到系统)。我在网上用了各种方式搜索这个问题的解决方案,都没找到好的,有关这个问题的帖子都少之又少,都只有吐槽它而没有解决了的。

       我把这个问题放了好几天,虽然有一个解决方案,就是进入到支付页面的时候使用href跳转的方式,会造成页面刷新,影响一些用户体验。就是因为这个方案不完美,我就一直搁着,今天呢就又把这个问题拿出来鼓捣。

今天不知道怎么来了灵感,寻思我靠这个不对啊,

http://example.com/#!/cart/index

这个页面的目录应该是

http://example.com/

       井号“#”后面应该都忽略才对。于是乎,我想了想,反正入口文件就是个静态html,服务器端也不直接接收query,于是就把链接改成了

http://example.com/?#!/cart/index

就加了一个问号,于是微信浏览器妥妥的把井号“#”后面的内容给去掉了,这个困扰了好几天的问题,最后用一个问号解决了。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,705评论 25 709
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,026评论 19 139
  • 是夜,西殿的宫室大多陷入了墨色,唯有一间,在浓墨中晕着些许亮光。 遥之立足那室门前,对内轻唤了句“仙主”,在得到回...
    冷清持阅读 1,370评论 21 25
  • 一、RunLoop和线程的关系 每条线程都有唯一的一个与之对应的RunLoop对象,一个线程可以开启多个Ru...
    Hing0000阅读 6,310评论 5 11
  • 付费就是捡便宜,乍一听挺不可思议的,放眼看去,过着寻常日子的人们,多数是秉持着能省就省的观念,所以很多时候,耗费着...
    kathy亚峰阅读 267评论 2 2