uniapp开发的H5网页，以表单形式调起微信H5支付

一、场景描述：

我们使用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);

调起页面如下：