html支付成功界面怎么设置声音提示？

h5的界面吗？

可以在界面写好 <audio id="payCompleteSound" src="支付成功声音路径.mp3">标签,当接收到支付成功消息回调时，js 执行代码 播放这个声音。document.getElementById("payCompleteSound").play()

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

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

也许是出于安全的考虑，在使用微信提供的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地址，并不会对单页应用内部路由产生问题。

微信在支付时显示 “当前页面的url未注册 ”，是微信公众平台里的参数没有设置好，下面给出配置教程：

1、打开微信公众号后台，点击左侧菜单“微信支付”

2、配置公众号支付-支付授权目录

注意：

添加授权目录的时候你需要以你支付路径的域名为主；

区分有 www和没 www的代表的是2个域名，注意区分：

http://laoji.org/Mobile/Pay/

http://www.laoji.org/Mobile/Pay/

以/结束，完成配置即可。

---