vue pc端web页面微信支付和支付宝支付_前端pc扫码实现微信支付和支付宝支付

2401_85015200

于 2024-05-14 19:38:34 发布

阅读量377

点赞数 3

分类专栏：程序员文章标签：物联网嵌入式硬件学习

本文链接：https://blog.csdn.net/2401_85015200/article/details/138867294

版权

程序员专栏收录该内容

16 篇文章 0 订阅

订阅专栏

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上物联网嵌入式知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、电子书籍、讲解视频，并且后续会持续更新

如果你需要这些资料，可以戳这里获取

在这里插入图片描述
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.到达承载页面之后会出来支付宝的二维码页面：

收集整理了一份《2024年最新物联网嵌入式全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升的朋友。