一、场景描述:
我们使用uniapp 开发H5网页,嵌入第三方的聚合页,第三方又嵌入另一个app内部
二、技术实现:
1、使用微信H5支付,参考https://pay.weixin.qq.com/wiki/doc/api/H5.php?chapter=15_1
2、使用 window.location.href='后端返回的订单url' 调起微信H5支付
三、出现的问题:
1、嵌入第三方app后,window.location.href形式无法调起H5支付,且官网也有说明,如下红字
四、解决办法
以form表单的形式发起调用
1、提交订单给后端,获取后端返回的订单链接payUrl
2、新建form,追加在body内,并设置form属性,把action设置成payUrl
3、使用document.forms['h5paysubmit'].submit();提交
4、移除form节点
// 拼接form
let h5form="<form id='h5paysubmit' name='h5paysubmit' style='display:none;'></form>"
const div = document.createElement('div');
div.id='h5pay';
div.innerHTML = h5form;// 返回的 form
document.body.appendChild(div);
// 设置form属性
document.forms['h5paysubmit'].method= "post";
document.forms['h5paysubmit'].action= result.payUrl;// 支付信息
document.forms['h5paysubmit'].submit();
// 删除节点
let divs=document.getElementById('h5pay');
document.body.removeChild(divs);
调起页面如下: