微信网页支付提示未注册问题的解决方案

最近开发单页应用，然后集成在微信端。因为项目需要接通微信支付，而在开发过程中也遇上了一些问题。所以便写下这篇文章，希望给同样遇上问题的朋友一个参考。

MG9NUM5V$YQPV83SVNHZMMF.png

在项目打包上线，微信上测试的时候结果报出以上错误。网上查看了很多资料，但是都没有比较详细的解决方案。

如果你也遇上以上的问题，那么我这篇文章也许能够帮到你。

也许是出于安全的考虑，在使用微信提供的JSSDK的时候，我们需要给当前的网址签名。我们需要在微信公众平台上填写当前网址的url。具体如下：

  www.test.com/orderPlus/demo1  //微信浏览器中访问的网址

那么我们微信公众平台上绑定的url就应该是www.test.com/orderPlus/。微信允许网址最后一个参数可变化，此刻我们就能够正常调用微信支付接口了。

  www.test.com/orderPlus/  //微信公众平台中授权url地址

如果你访问的网址如下，就会出现上图中的错误，当前页面url未注册的警告。

  www.test.com/orderPlus/demo1/demo2  //注意，这种情况下会报错

因为微信签名url只能允许url地址最后一个参数可变化。但是，实际开发中，我们的支付页面可能有很多个，而且深入程度不同，而微信允许添加的url授权地址又只有5个。那样的话如何解决呢！

使用H5新特性，来修改url地址

如果遇到以上问题，我们可以使用H5的history.pushState()和history.replaceState()这两个方法。这两个方法的作用是相同的，他们只会修改当前url的地址，但是不会刷新我们的网页，唯一不同点在于一个重新创建一个url地址，而另外一个会修改当前的url地址，导致路由历史记录被覆盖。那么，我们的问题就可以解决了。而这两个方法具体的使用，大家可以查询官方文档。

大致的解决方法是，比如一个充值页面，当我们输入完金额之后，点击充值按钮的时候，首先触发history.pushState(null,null,"A.html")，传入三个参数，前两个参数大家参考官方，最后一个参数是我们需要修改的url地址。

这里我说明一下，自己使用上述方法后的一点心得。上述方法第三个参数，有一些注意点。

  当前网址：www.test.com/orderPlus/demo1
  传入参数：history.pushState(null,null,"/A.html")
  最后网址：www.test.com/A.html

当我们传入"/A.html"的时候，他会将我们域名后的参数全部去掉，然后将我们的参数添加上去。

  当前网址：www.test.com/orderPlus/demo1
  传入参数：history.pushState(null,null,"A.html")
  最后网址：www.test.com/orderPlus/A.html

当我们传入"A.html"的时候，他只会把网址最后一个参数修改掉。

  当前网址：www.test.com/orderPlus/demo1
  传入参数：history.pushState(null,null,"？A.html")
  最后网址：www.test.com/orderPlus/demo1?A.html

当我们传入"？A.html"的时候，他会将我们的添加的参数，添加到我们的url后。
以上就是需要注意的地方。

关于安卓可以唤起支付，ios不能唤起的问题

原本以为通过上诉的方法，一切会很顺利。结果，在我实际测试的时候，又出现了一个坑爹的情况。测试上安卓手机能够成功唤起支付，而ios却不能唤起。（ios下第一次能够唤起，关闭网页，再次打开就不能正常唤起了）。
查看许多的资料，最后得出的结果是，对于单页应用，ios系统获取签名的url是我们首次进入的地址，而安卓系统获取的是当前的url地址。

  ios系统
  首次进入网址：www.test.com/orderPlus/demo1
  进入到支付页面的网址：www.test.com/orderPlus/demo1/#/test1
  我们授权的：url：www.test.com/orderPlus/

我们之前说过，微信能够允许url后一个可变参数，而现在出现两个参数，结果就无法唤起支付了。而安卓是拿取当前的url地址，而我们每次去唤起支付的时候，都会去修改这个地址，所以安卓就没有问题，而ios拿取的是我们首次进入的地址。
既然如此，就只能为ios系统在一开始进入的时候，就将url地址修改掉。
本人使用react框架开发单页应用，所以我在app.js也就是最顶层的组件中将url地址修改掉。成功解决问题。

url地址中的参数是可变的情况

本来以为一切就此结束，结果，又一个麻烦的问题出现了。项目中url中的一个参数是根据微信授权后，后台根据不同用户产生的不同的id值。这样的话，问题就出现了。

   用户A登入，url地址为：www.test.com/orderPlus/A/demo1
   用户B登入，url地址为：www.test.com/orderPlus/B/demo1
   用户C登入，url地址为：www.test.com/orderPlus/C/demo1

以上只是一个举例，实际上用户是无法预测的。而我们通过微信公众平台后台授权的url地址只有5个，就算没有限制，手动添加也是不可能的。
想了许久，最后我想到了一个方法。这里要使用history.pushState()第三个参数的第三种写法，也就是增加一个"？"。因为，在浏览器中，系统会默认将？后面的参数全都忽略。

    比如：www.test.com/orderPlus?C/demo1

以上url，系统只会识别www.test.com/orderPlus/demo至于后面的参数都不会管，而微信授权签名也只会寻找前面有效的参数。那么我们就可以通过这种方式将url地址修改掉。

    www.test.com/orderPlus/ab85s56d45d8e6f56/demo1#/list  //这是我们一开始的地址。
    而其中"ab85s56d45d8e6f56"是后台自动生成的一个参数，我们可以在JSP页面中获取得到，比如我将这个参数放在变量appconfig中，那么我们就可以通过下面这种方式修改了。
    history.pushState(null,null,`/orderPlus/${appconfig}？`)  //如此就能将我们的url修改成自己正常的了。

而且通过这种方式修改的url地址，并不会对单页应用内部路由产生问题。