具体步骤：
首先通过微信支付的api 获得支付用的prepay_id，这里需要用到上面提到的“AppID(应用ID)”，“AppSecret(应用密钥)”，“微信支付分配的商户号”，“商户支付密钥”以及其他的一些参数（具体参照微信开发文档）用MD5加密成签名（第一次签名）获得prepay_id后，用prepay_id和一些其他参数（具体参照微信开发文档）用MD5加密成签名（第二次签名）然后在前端通过微信内置浏览器提供的js API，WeixinJSBridge.invoke来调用微信支付的弹出页面，这里需要用到上面的第二次的签名
注：支付链接和在开发平台配置的链接不匹配，总共需要2次签名，并且所需的参数是不同的，在JS中用到的签名是第二次签名，不要混淆参数传递的不能有错。
最近开发单页应用，然后集成在微信端。因为项目需要接通微信支付，而在开发过程中也遇上了一些问题。所以便写下这篇文章，希望给同样遇上问题的朋友一个参考。
在项目打包上线，微信上测试的时候结果报出以上错误。网上查看了很多资料，但是都没有比较详细的解决方案。
也许是出于安全的考虑，在使用微信提供的JSSDK的时候，我们需要给当前的网址签名。我们需要在微信公众平台上填写当前网址的url。具体如下：
那么我们微信公众平台上绑定的url就应该是 www.test.com/orderPlus/ 。微信允许网址最后一个参数可变化，此刻我们就能够正常调用微信支付接口了。
如果你访问的网址如下，就会出现上图中的错误，当前页面url未注册的警告。
因为微信签名url只能允许url地址最后一个参数可变化。但是，实际开发中，我们的支付页面可能有很多个，而且深入程度不同，而微信允许添加的url授权地址又只有5个。那样的话如何解决呢！
如果遇到以上问题，我们可以使用H5的history.pushState()和history.replaceState()这两个方法。这两个方法的作用是相同的，他们只会修改当前url的地址，但是不会刷新我们的网页，唯一不同点在于一个重新创建一个url地址，而另外一个会修改当前的url地址，导致路由历史记录被覆盖。那么，我们的问题就可以解决了。而这两个方法具体的使用，大家可以查询官方文档。
大致的解决方法是，比如一个充值页面，当我们输入完金额之后，点击充值按钮的时候，首先触发history.pushState(null,null,"A.html")，传入三个参数，前两个参数大家参考官方，最后一个参数是我们需要修改的url地址。
这里我说明一下，自己使用上述方法后的一点心得。上述方法第三个参数，有一些注意点。
当我们传入"/A.html"的时候，他会将我们域名后的参数全部去掉，然后将我们的参数添加上去。
当我们传入"A.html"的时候，他只会把网址最后一个参数修改掉。
当我们传入"？A.html"的时候，他会将我们的添加的参数，添加到我们的url后。
以上就是需要注意的地方。
原本以为通过上诉的方法，一切会很顺利。结果，在我实际测试的时候，又出现了一个坑爹的情况。测试上安卓手机能够成功唤起支付，而ios却不能唤起。（ios下第一次能够唤起，关闭网页，再次打开就不能正常唤起了）。
查看许多的资料，最后得出的结果是，对于单页应用，ios系统获取签名的url是我们首次进入的地址，而安卓系统获取的是当前的url地址。
我们之前说过，微信能够允许url后一个可变参数，而现在出现两个参数，结果就无法唤起支付了。而安卓是拿取当前的url地址，而我们每次去唤起支付的时候，都会去修改这个地址，所以安卓就没有问题，而ios拿取的是我们首次进入的地址。
既然如此，就只能为ios系统在一开始进入的时候，就将url地址修改掉。
本人使用react框架开发单页应用，所以我在app.js也就是最顶层的组件中将url地址修改掉。成功解决问题。
本来以为一切就此结束，结果，又一个麻烦的问题出现了。项目中url中的一个参数是根据微信授权后，后台根据不同用户产生的不同的id值。这样的话，问题就出现了。
以上只是一个举例，实际上用户是无法预测的。而我们通过微信公众平台后台授权的url地址只有5个，就算没有限制，手动添加也是不可能的。
想了许久，最后我想到了一个方法。这里要使用history.pushState()第三个参数的第三种写法，也就是增加一个"？"。因为，在浏览器中，系统会默认将？后面的参数全都忽略。
以上url，系统只会识别 www.test.com/orderPlus/demo 至于后面的参数都不会管，而微信授权签名也只会寻找前面有效的参数。那么我们就可以通过这种方式将url地址修改掉。
而且通过这种方式修改的url地址，并不会对单页应用内部路由产生问题。
