業(yè)務(wù)場景介紹：

pc端支持微信支付 [ Native支付官方API] && 支付寶支付 [電腦網(wǎng)站支付官方API ]

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

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

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

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

3.喚起二維碼支付頁面

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

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

上述微信支付這么簡單，同理pc端的支付寶支付也很簡單，因?yàn)闃I(yè)務(wù)層與支付寶做訂單交互還是后端處理的，所以前端的工作量就相當(dāng)簡單。
1.這里需要一個(gè)承載頁面，來承載后端與支付寶完成交互之后，請求后端支付接口會返回一個(gè)from表單，前端只需要負(fù)責(zé)把它展現(xiàn)給用戶掃碼即可，承接頁面如下（為了方便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.到達(dá)承載頁面之后會出來支付寶的二維碼頁面：

3.用戶掃碼完成之后，進(jìn)入支付寶倒計(jì)時(shí)頁面后續(xù)就是業(yè)務(wù)邏輯處理了，至此支付寶PC支付也已經(jīng)完成。

移動端H5支付（微信+支付寶）點(diǎn)擊查看

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。