vue 移动端H5微信支付和支付宝支付

一、移动端支付宝支付

其实支付宝支付也有H5支付和支付宝浏览器支付，这里只做H5支付，因为已经满足了业务需求。 1.支付宝中的H5支付和PC端的一样，主要是后端的工作量，后端完成订单的生成之后返给前端的是form表单，前端只需要负责做页面的跳转即可：

2.选择支付宝方式之后进入支付宝承载页面：

<template>
  <div v-html="html"></div>
</template>
<script>
    export default {
          
   
      data(){
          
   
        return{
          
   
          html:
        }
      },
      methods:{
          
   
        fetchVideoPay(){
          
   
          let param={
          
   
            orderId: this.$route.query.orderId
          };
          this.$api.orderpage.videoAliPay(param).then( res => {
          
   
            this.html = res.data;
            this.$nextTick(() => {
          
   
              document.forms[0].submit()   //渲染支付宝支付页面
            })
          })
        }
      },
      mounted(){
          
   
        this.fetchVideoPay()
      }
    }
</script>

当然不想写承载页的还有其他方法调起支付，具体逻辑具体分析，根据不同的业务类型去变通比如：

const div = document.createElement(div);
div.innerHTML = (res.data);  //res.data是返回的表单
document.body.appendChild(div);
document.forms.alipaysubmit.submit();

document.addEventListener("visibilitychange", function() {
          
   
    //需要的操作
});

持续更新中……