業務場景介紹：

pc端支持微信支付 [ Native支付官方API] && 支付寶支付 [電腦網站支付官方API ]

訂單生成邏輯：前端請求后端提交訂單，后端去和微信或者支付寶對接生成訂單（后續支付都是這個邏輯進行的對接）

一、vue中pc端微信支付怎么去玩？

這里大部分工作量是后端的事情，訂單的生成由后端去和騰訊對接的，前端只需要負責將后端返回來的支付二維碼（由后端生成的，有些情況也可以前端去對接訂單生成之后由前端自己生成二維碼，這種情況比較少）展示在終端供用戶掃碼即可：
1.二維碼展現窗口

2.請求后端的支付二維碼接口

3.喚起二維碼支付頁面

4.掃碼完成支付即可，后續完成支付就是項目中的業務邏輯了。至此微信PC端支付已完成，前端的工作量是不是很少~

二、vue中pc端支付寶支付怎么玩？

上述微信支付這么簡單，同理pc端的支付寶支付也很簡單，因為業務層與支付寶做訂單交互還是后端處理的，所以前端的工作量就相當簡單。
1.這里需要一個承載頁面，來承載后端與支付寶完成交互之后，請求后端支付接口會返回一個from表單，前端只需要負責把它展現給用戶掃碼即可，承接頁面如下（為了方便ctrl+c這里貼代碼）：

<template><div v-html="html"></div> </template><script>import { videoPay } from '@/api/pay.js'export default {data(){return{html:''}},methods:{fetchVideoPay(){let param={orderId: this.$route.query.orderId};videoPay(param).then( res => {this.html = res.data;this.$nextTick(() => {document.forms[0].submit()})})}},mounted(){this.fetchVideoPay()}} </script>

2.到達承載頁面之后會出來支付寶的二維碼頁面：

3.用戶掃碼完成之后，進入支付寶倒計時頁面后續就是業務邏輯處理了，至此支付寶PC支付也已經完成。

移動端H5支付（微信+支付寶）點擊查看

總結

以上是生活随笔為你收集整理的vue pc端web页面微信支付和支付宝支付的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。