支付功能(支付宝，微信)，vue3前端处理后台返回的数据

前段时间，接触了一下支付功能，这个支付宝太坑爹，返回了form，然后让我渲染成支付宝支付页面，当时就有点迷，然后查资料，自己也推测，还好不是很难，就是有点特殊。然后微信呢，返回的是个blob，也是要处理，废话不多说，上代码。

支付宝支付

先看一下，后台返回的数据

可以看出来是一个form表单，但是要怎么处理呢，我当时的想法是，既然是个dom，那我直接v-html一下，不就出来了。但是不知道啥原因，就一直不出来。然后不纠结了，另寻出路。

然后就找到下面这种方法

<iframe
  :srcdoc="htmlDom"
  frameborder="no"
  border="0"
  marginwidth="0"
  marginheight="0"
  scrolling="no"
  width="1200"
  height="850"
  style="overflow: auto"
></iframe>

hhmlDom就是接口获取到的form字段，然后支付页面就出来了。

微信支付

下面就是微信支付后台返回的blob数据

当然，请求的时候要处理一下请求方式，axios的responseType 要blob类型

根据自己封装的axios将type传过去。然后就能回来以上的数据。

const blob = new Blob([weChatResult as any]);
wechatPay = window.URL.createObjectURL(blob);

wechatPay就是返回的数据生成的图片地址，然后放到img上。就会生成一张二维码，扫码支付。

以上就是支付的处理。