微信h5调用支付宝支付\使用地图全流程

最新推荐文章于 2026-04-02 02:55:24 发布

原创

最新推荐文章于 2026-04-02 02:55:24 发布 · 1.3k 阅读

标签

#web app

收录于

因业务需要，需要开发了一个h5页面，能在微信里打开调用地图导航，以及可以用支付宝支付。中间踩了好多雷，小小的记录一下。

h5发起支付宝支付

h5中调用支付宝的核心代码如下：（我i这个对于支付验签等的处理全部是由后端接口进行处理的，前端只需要接收后端传递的一个form即可）

let divForm = document.getElementsByTagName("divform");
                if (divForm.length) {
                  document.body.removeChild(divForm[0]);
                }
                this.html = res.data;
                var form = res.data;
                const div = document.createElement("divform");
                div.innerHTML = form; //此处form就是后台返回接收到的数据
                document.body.appendChild(div);
                // document.forms[0].setAttribute('target', '_blank') // 新开窗口跳转
                document.forms[0].submit();

此时这里就可以正常调用支付宝发起支付。

但是在微信中发起支付跳转时，会有一个很不美观的长串链接，需要手工复制到浏览器打开，体验很不好，于是查阅了支付宝文档，有一个处理的方法。链接传送门：https://opendocs.alipay.com/open/203/