微信H5网页支付产生未注册的问题
最近开发单页应用,然后集成在微信端。因为项目需要接通微信支付,而在开发过程中也遇上了一些问题。 所以便写下这篇文章,希望给同样遇上问题的朋友一个参考。
如果你此刻正好遇上图中的情况,那么我这篇文章也许能帮到你。
微信网页端支付接口,也许是出于安全考虑。在每次唤起微信JSSDK的时候,需要当前的URL签名一下,
而我们签名的URL地址需要同微信公众平台上的授权码相同。具体如下:
假如我们当前的页面URL地址为:www.test.com/orderPlus/8a2b4dasd/delivery
那么,在微信公众平台上的授权码就必须是www.test.com/orderPlus/8a2b4dasd/
他们唯一的区别就是后面的一个参数,这个参数可以是任何。
但是需要注意的是只能有一个参数,例如:你当前的URL地址是www.test.com/orderPlus/8a2b4dasd/delivery/demo
因为这样比授权码后面多了两个参数,我们在唤起JSSDK的时候就会出现URL未注册的情况。
解决方法:修改当前的URL地址
这里我们可以使用H5新增的新特性来解决以上的问题,history.pushState()和history.replaceState()两者的区别是一个会新增一个URL地址,另一个会修改当前的URL地址,而他们最主要的是改变了url,但是页面却不会刷新,这样对于使用单页应用出现如上错误,正好发挥用处。 具体的使用方式,大家自行google一下。这里我简单说一下,以上两个方法的一些注意点。 网上找的都是这两个方法的基础说明,很官方。本人自己测试了一下,发现还是有些注意点的。 比如方法中需要传入三个参数,前两个参数的用法,官方有说明,我主要说下第三个参数。 第三个参数需要传入一个url,比如我的网址是www.test.com 当参数传入/A.html。那么我们的URL地址就会变成www.test.com/A.html 而注意点是,传入的三种url方式。"/A.html" "A.html" "?A.html" 以上三种分别形成不一样的url。 第一种会把url地址中从域名后,所有的参数都去掉,然后添加上/A.html 比如网址是www.test.com/demo1/demo2/demo3; 使用之后就变成www.test.com/A.html 第二种将会修改url地址最后一个参数 比如网址是www.test.com/demo1/demo2/demo3/index.html 使用之后就变成www.test.com/demo1/demo2/demo3/A.html 而第三种将会在url后添加上这个参数。而且因为这个是"?"所以浏览器会忽略"?"后面的参数。 大家可以自行测试一下。
安卓手机能够唤起,ios手机又无法唤起了
出现如上问题的,网上有个大牛也发表过文章,我一开始查阅的时候,看的蒙蒙的。 大致的意识就是,安卓手机获取的是当前的url地址,那么使用上面的方式,在我们点击支付按钮的时候,将当前的url地址 不刷新的修改掉,那么就能正常唤起微信支付了。但是,恶心的ios获取的却是首次加载的页面(也就是每次进入的主页)。所以就产生了安卓正常,ios不正常。 解决的方法很简单:我们只需要在首次进入的页面(组件,就是最顶层的APP.js)中将url地址修改掉,这样就完美的解决的了问题。
关于url地址中有参数变化
这个问题是我个人在开发中遇到的。我的应用在微信授权完之后会得到一个商户id,而这个id是会变动的。
比如这样:www.test.com/orderPlus/8a2b4dasd/delivery,其中的8a2b4dasd是商户id,会变动的。
这个时候这么做,想了半天,最后使用上面提到的"?"去解决。
这个问题,我具体描述,希望有遇上的朋友能够做个参考。
首先,我将微信公众平台的授权码改为www.test.com/orderPlus/
接着,然后我在获取当前的url,将当前url地址通过history.pushState()修改掉。
变成这样www.test.com/orderPlus/8a2b4dasd?delivery,就是将商户id后面原本跟着的"/"改变成"?"
因为浏览器默认会将"?"后面的参数忽略掉,所以微信拿到的url地址其实只有www.test.com/orderPlus/8a2b4dasd
之前说过,签名url允许授权地址后面有一个变成的参数,所以就能够正常唤起微信支付。
当然,我们的路由是在url最后面添加"#/xxx"所以,我们的路由依旧可以正常使用。