最近在做微信公众号支付功能，iOS正常唤起微信支付并支付成功；android唤不起微信支付，显示失败。

最新推荐文章于 2024-02-06 16:50:36 发布

三人行，必有我师！！！

最新推荐文章于 2024-02-06 16:50:36 发布

阅读量1k

点赞数

分类专栏： vue H5

原文链接：https://blog.csdn.net/chenzfyy/article/details/54645817

版权

vue 同时被 2 个专栏收录

74 篇文章 2 订阅

订阅专栏

32 篇文章 0 订阅

订阅专栏

场景：本公司做一个投保活动页面，和第三方公司合作，前端请求接口，后台给返回链接，链接是第三方公司回调给的唤醒页面支付的链接。前端用的iframe 给src赋值，展示微信支付页面。

问题：ios手机一点问题没有，正常投保，正常支付。但是，但是，但是，安卓唤醒不了支付页面，一直白屏。中间有个10224报错。

一直以为是合作方页面问题，因为把链接换成百度地址，安卓ios都可以正常跳转。

但是，但是，但是

最终是我们这边的问题

将iframe换成a标签，href跳转，完美解决安卓不能唤醒微信支付问题。

let a = document.createElement("a"); // 生成一个a元素
let event = new MouseEvent("click");
a.href = res.data.url;               
a.dispatchEvent(event);

呜呼哀哉！哭唧唧哭唧唧

============== 分割线 =========================

在调用微信支付的时候遇到提示“URL未注册”，这通常是因为没有在微信支付后台正确配置授权目录的问题，但我所遇到的并非如此。

我们的应用中有3个页面用到微信支付：

http://example.com/#!/cart/index
http://example.com/#!/order/orderlist
http://example.com/#!/order/orderinfo

微信支付允许配置3个目录为授权目录，另外允许配置一个测试环境目录，授权目录必须配置到最后一级目录，配置在根目录不行。到这里其实还都不是问题，问题是微信判断当前路径的方式。

我们先定义两个名词：首先把当前页面叫做“Current Page”；当我们从微信别的地方点击链接呼出微信浏览器时所落在的页面、或者点击微信浏览器的刷新按钮时所刷新的页面，我们叫做“Landing Page”。举个例子，我们从任何地方点击链接进入页面A，然后依次浏览到B、C、D，那么Current Page就是D，而Landing Page是A，如果此时我们在D页面点击一下浏览器的刷新按钮，那么Landing Page就变成了D（以上均是在单页应用的环境下，即以hashbang模式通过js更改浏览器路径，直接href跳转的不算）。

问题来了，在ios和安卓下呼出微信支付的时候，微信支付判断当前路径的规则分别是：

IOS：Landing Page
安卓：Current Page

这个规则是我试了N次试出来的，非常的坑，这就意味着，在ios环境下，任何一个页面都有可能成为支付页面（因为我无法预知和控制用户在哪个页面点微信浏览器的刷新按钮，或是用户通过哪个连接从外部进入到系统）。我在网上用了各种方式搜索这个问题的解决方案，都没找到好的，有关这个问题的帖子都少之又少，都只有吐槽它而没有解决了的。

我把这个问题放了好几天，虽然有一个解决方案，就是进入到支付页面的时候使用href跳转的方式，会造成页面刷新，影响一些用户体验。就是因为这个方案不完美，我就一直搁着，今天呢就又把这个问题拿出来鼓捣。

今天不知道怎么来了灵感，寻思我靠这个不对啊，