本文对公共号支付的支付授权目录设置进行介绍并给出了一种解决单应用H5页面下授权目录不生效的方法。

概述

支付授权目录设置是完成微信公共号支付的关键步骤，如果设置不合理会导致无法完成支付，遇到的最常见的错误就是URL未注册。目前微信限制正式支付授权目录最多为3个，如果发起支付的页面地址超出3个该怎么办？
首先看一下微信官方文档对授权支付目录的设置介绍：

1、设置测试目录

在微信公众平台设置，栏目见图。支付测试状态下，设置测试目录，测试人的微信号添加到白名单，发起支付的页面目录必须与设置的精确匹配。并将支付链接发到对应的公众号会话窗口中才能正常发起支付测试。注意正式目录一定不能与测试目录设置成一样，否则支付会出错。

微信内网页支付设置栏目入口

2、设置正式支付目录

根据图中栏目顺序进入修改栏目，勾选JSAPI网页支付开通该权限，并配置好支付授权目录，该目录必须是发起支付的页面的精确目录，子目录下无法正常调用支付。具体界面如图所示：

微信指明发起支付的页面目录必须与设置的精确匹配，但是在实际开发中因为授权目录导致的URL未注册错误层出不穷，而且IOS和Android系统在获取当前支付页面时也不同，导致无法正常支付。

正文

项目中H5前端选用的是基于Angularjs的单页面应用(SPA)，所有页面的地址都会带有Hash值，体现在URL中就是带有/#!/，最初我在公共号后台也是配置了3个授权目录：

http://XXX.com/#!/user/
http://XXX.com/#!/play/
http://XXX.com/#!/

按照微信的说明，也就是所有在/user/、/play/以及主目录下的页面都能发起支付，但是通过在IOS和Android系统中拷贝当前页面URL，发现经常有当前页面URL与实际不符情况，这样就导致支付页面不能准确匹配授权目录，从而引起‘当前URL未注册’错误的发生。

后来发现了一篇非常有用的博文<开发单页应用(SPA)时候遇到的微信支付授权目录的坑>，他在其中给出了微信端对于IOS和Android系统判断当前支付页面路径的规则：

我们先定义两个名词：首先把当前页面叫做“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环境下，任何一个页面都有可能成为支付页面（因为我无法预知和控制用户在哪个页面点微信浏览器的刷新按钮，或是用户通过哪个连接从外部进入到系统）
这与我在实际开发中遇到的情况完全相符！

于是将所有H5链接全部添加?，例如：原始URL链接为：http://XXX.com/#!/test/100000，现改为http://XXX.com/?#!/test/100000，这样做之所以生效基于以下两点：

◆添加?后不影响原有页面正常访问

添加?后可以正常访问原有页面，这是非常重要的，保证了页面能够正确路由

◆微信判断支付页面的规则

由于URL中添加?，微信在拿到页面URL时会将?后的内容当作参数处理自动截取掉，不参与授权目录的比较，因而微信端判断出来的所有页面的授权目录均为http://XXX.com/，因此支付授权目录设置为http://XXX.com/问题即可解决。

至此，关于微信支付的系列文章已全部完结。