html发起微信或支付宝支付 vue实现-微信网页中唤起支付宝支付

微信浏览器内是无法唤起支付宝的，会提示在浏览器打开，类似下面

image.png

所以在微信公众号的支付宝支付最终是通过手机浏览器唤起的支付宝支付，按照手机网站的支付方式即可。

官方也有demo,官方demo的用户提示相对来说更好一些，可以参照一下

微信公众平台无法使用支付宝收付款的解决方案

image.png

用vue的要注意ap.js中需要修改

image.png

此处不用路由跳转的原因是因为在ios手机中，路由跳转后的页面，复制出来的链接并不是本路由的实际url

我的实现：

//util.js，需引入ap.js : import ap from './ap'

//网页唤起支付宝支付

function alipay_H5(data){

const div = document.createElement('div');

div.innerHTML = (data);

document.body.appendChild(div);

//document.forms.alipaysubmit.submit();

var queryParam = '';

Array.prototype.slice.call(document.querySelectorAll("input[type=hidden]")).forEach(function (ele) {

queryParam += '&' + ele.name + "=" + encodeURIComponent(ele.value);

});

var gotoUrl = document.querySelector("#alipaysubmit").getAttribute('action') + queryParam;

_AP.pay(gotoUrl);

}

微信网页和手机浏览器都可通过该方式

_AP.pay(gotoUrl);

调用的是

image.png

在pay方法里跳转到demo里的pay.html页面，

pay.html里会判断当前若是微信浏览器，则提示用户用手机浏览器打开，

若是手机浏览器，会直接再进行一次跳转，跳到支付宝支付界面