vue移动端h5调用支付宝支付接口

介绍一种比较简单的h5调用支付宝支付接口的方法

首先，肯定是后台写好接口，将订单信息传给后台，后台根据文档，向支付宝请求h5的支付数据，返回一个form表单到前端上，格式如下:

得到这个form之后怎么用呢，我们需要在ajax请求的异步回调上，将返回的form输出到html界面上，代码如下：

payMoney() {
            this.$http.get('/api/wpersonaldata.ashx?action=alipay', {                
                params: {                   
                    price: this.$route.params.price,
                    begindate: this.$route.params.startDate,
                    enddate: this.$route.params.endDate,
                    webpay: 'webpay',
                    quiturl: 'https://xxxxxx.com'
                }            })
                .then((res) => {
                    console.log(res.data)
                    this.html = res.data
                    var form= res.data;
                    console.log(url)

                    const div = document.createElement('div')
                    div.innerHTML = form//此处form就是后台返回接收到的数据
                    document.body.appendChild(div)
                    document.forms[0].submit()
                    

                })
                .catch((error) => {
                    console.log(error)
                })
        }

如上面的案例，重点的代码就是这段

const div = document.createElement('div')

div.innerHTML = form//此处form就是后台返回接收到的数据

document.body.appendChild(div)

document.forms[0].submit()

只要后台返回的form表单没问题，就会跳转到支付宝支付接口啦。