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

Posted 2023-05-17

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

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

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

微信内嵌H5网页 解决js倒计时失效

项目要求：将H5商城页面嵌套到公司微信公众号里

    项目本身的开发跟移动端网页并无太多差异，只是这昨天遇到一个问题，说是棘手，到也简单。

    用户下单后，在选择支付方式页面，有个倒计时的逻辑（从下单时开始计算，24小时后未支付，会有ws自动取消这个订单），js代码如下：　

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

<script type="text/javascript"><br>  var timespan = \'20160113\';    //后台程序生成24小时时间差值，这里随便写写         var timer;         function UpdateTime() {             if (timespan > 0) {                 var hour = Math.floor(timespan / (60 * 60));                 var minute = Math.floor((timespan - (hour * 60 * 60)) / 60);                 var second = (timespan - (hour * 60 * 60) - (minute * 60));                 var word = "支付剩余时间" + (hour<10?("0"+hour):hour) + "：" + (minute<10?("0"+minute):minute)  + "：" + (second<10?("0"+second):second)  + "，逾期订单将自动取消~";                 timespan--;                 jQuery(".tc").html("<i class=\'time\'></i>" + word);                 timer = setTimeout("UpdateTime()", 1000);             }             else {                 $(\'.content\').find(\'.w_op\').hide();                 clearTimeout(timer);                 jQuery(".tc").html("<i class=\'time\'></i>" +  "订单过期，已自动取消~");                 window.location.href=\'@Url.Action("orderDetail", "Order", new { OrderNumber = Model.No })\';;   //订单过期，跳转到订单详情页             }         }                   jQuery(document).ready(function () {             UpdateTime();         });<br></script>

　　页面效果如下：

 

　　这样写，本来没有任何问题的，而且本地测试都ok。

　　可是，放到外侧的时候，问题就来了。安卓版微信，会出现当手机锁屏时，出现倒计时没有走，仍然是关闭屏幕前时间，也就是说息屏这段时间，时间静止了...

　　后来，后来当然不能着急啊，各方求救，寻找方法，于是有了下面：

　　倒计时的实现，在第一次进入页面时，请求服务器获取倒计时的剩余时间，然后在页面通过js等手段再倒计时；手机在锁屏后再解锁后倒计时还在进行但是倒计时的时间不准确，究其原因是在解锁后没有去请求服务器的时间来重新倒计时而是还是按照上次锁屏的基础上进行倒计时的，这是因为浏览器有缓存，在不刷新页面的情况下，浏览器会缓存第一次请求的内容，服务端更新后浏览器仍然显示第一次的内容

　　后来多方查证，可以在meta里进行设置，设置页面nocache，每次访问次页面，均需要从服务器重新获取，而不是使用缓存中读取

　 expires设定过期时间，一旦过期就必须请求服务器，

　 expries出现在http-equiv属性中，使用content属性表示页面缓存的过期时间

　 expries=0，缓存过期前的分钟数。若用户在页面过期前返回该页面，就会显示缓存的版本页　　　

1 2 3

<meta http-equiv="pragma" content="no-cache">  <meta http-equiv="cache-control" content="no-cache">  <meta http-equiv="expires" content="0">

　　

就这么完美解决了 [胜利]