VUE实现PC页面微信二维码支付

已于 2024-06-18 13:25:18 修改
阅读量1k 收藏 13
点赞数 9
分类专栏： 前端开发 文章标签： 微信
于 2024-01-23 18:00:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_58889179/article/details/135777779
版权
本文介绍了如何通过调用后端接口生成订单号和支付金额，然后利用QRCode插件将获取的codeUrl转换为二维码。步骤包括安装qrcode插件、在mine.js中引入并最终在页面上显示二维码效果。
摘要由CSDN通过智能技术生成

1.生成订单获取订单号，支付金额（调用后端订单生成接口）

2.调用支付接口获取codeUrl

3.使用QRCode将codeurl转化为二维码

3-1安装QRCode插件

npm install qrcode -S

3-2在mine.js引入插件

import QRCode from 'qrcode'

3-3在页面使用QRCode

 <img :src = "qrCode" style="height: 300px;width: 300px"/>

4.效果

两袖清风戏凡尘
关注
专栏目录
Vue2 - 最新详解实现网站接入微信支付功能，调起微信支付页面或微信扫码支付效果详细教程，手机移动端H5或电脑PC网页 “微信环境内支付“与“脱离微信环境外部浏览器支付“ 示例代码，支持微信公众号！
王佳斌
06-22 2353
vue2，nuxt2，微信支付，vue微信支付，vue2如何使用微信支付，脱离浏览器怎么用微信支付，redirect_uri参数错误，回调地址错误，h5生成微信支付二维码，H5微信支付，PC端微信支付，前端支付，拉起微信支付，pc扫码支付，新手小白详细教程示例，SDK，vue对接微信支付，拉不起来微信支付，微信公众号，h5支付，jssdk，JSAPI，公众号网页支付，pc网站，微信支付二维码，生成支付二维码，扫码支付，扫码支付，uni-app，详解微信支付，支付回调报错，微信支付报错，无法支付，无法唤起支付
Vue2 - 详解实现网站使用企业微信二维码扫描登录，企业微信授权第三方网站接入企业微信登陆功能，扫二维码登录后获取用户信息，登录页展示企业微信二维码或iframe新开一页或弹框，解决各种报错登录失败
王佳斌
07-20 2642
vue2，nuxt2，企业微信，登录，企业，详细教程，vue企业微信登陆，pc网站，移动端h5网页，企业微信开发第三方应用之扫码授权登录，pc端集成企业微信的扫码登录，二维码不显示，报错，无法获取用户手机号昵称姓名，没反应出错，无法本地开发调试，vue2企业微信扫码登录，轮询检查，web前端，企业微信当前页面扫码登录(构造内嵌登录二维码)，nuxt企业微信，如何解决这个错误，企业微信的网页授权登录、扫码授权登录，nuxt2调用企业微信的扫描登陆，wwLogin，登录回调，最新，最好用的插件，页面弹出一个小窗
微信支付（JSAPI支付）/支付宝支付（手机网站支付）实现思路及实现方案-无源码
weiqiang915的博客
06-19 1491
临时车费用缴费二维码需要通知支持微信及支付宝。 用户缴纳的停车费直接到各个商户的账户上，不经过停车系统开发公司。
Vue微信支付
06-22
VueJS微信支付，亲测可用，可用在微信公众号和微信小程序等
PC端扫码实现微信支付
最新发布
weixin_42487883的博客
07-23 502
通过以上步骤，我们实现了PC端扫码支付的完整流程，包括生成支付订单、生成支付二维码以及处理支付结果通知。在实际应用中，可以根据业务需求进一步完善和优化代码逻辑。
2024年echarts饼图如何去掉指示线指示文字_echarts饼图去掉标签，面试必备
2401_85012069的博客
05-14 1128
legend: {data: []},series : [name: ‘访问来源’,label: {normal: {},data:[{value:335, name:‘直接访问’},{value:310, name:‘邮件营销’},{value:234, name:‘联盟广告’},{value:135, name:‘视频广告’},{value:1548, name:‘搜索引擎’}],},
PC端实现微信支付功能（Vue2.0）
前端如逆水行舟...
08-29 4241
解决了this问题，基本上已经完成了支付功能，剩下的就是在判断支付成功的里面加上路由跳转至支付成功的界面。此时二维码已经生成了，但没有实现支付功能，我们需要借助MessageBox中的beforeClose。在实现微信支付之前，我们要知道，在提交订单是我们需要携带一个query参数去支付页面。常规来说200是支付成功，205是支付中，我这样做的目的也是为了能不用付款（但发请求）就可实现功能。code: "" //我们需要留存请求支付的状态码，205的话说明支付成功。.........
vue pc端web页面微信支付和支付宝支付
热门推荐
web小袋鼠
05-23 1万+
业务场景介绍： pc端支持微信支付 [ Native支付官方API] && 支付宝支付 [电脑网站支付官方API ] 订单生成逻辑：前端请求后端提交订单，后端去和微信或者支付宝对接生成订单（后续支付都是这个逻辑进行的对接） 一、vue中pc端微信支付怎么去玩？ 这里大部分工作量是后端的事情，订单的生成由后端去和腾讯对接的，前端只需要负责将后端返回来的支付二维码（由后端生成的，有...
vue生成二维码，pc支付【完整效果】
02-18
为了在PC上实现支付功能，你需要与后端接口交互，获取支付二维码的URL。这个接口可能需要用户的身份信息和其他支付参数，如商品ID、金额等。收到服务器返回的支付链接后，生成二维码并展示。 5. **错误处理和用户...
vue 实现PC端微信扫码登录（二维码内嵌网页版）
WYH1205的博客
04-07 9366
1.先在index.html中引入js文件 <script src="https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script> ** 2.在需要的页面进行实例化（本项目是在登录页进行扫码） 键值说明： Id: 是存放二维码的容器， appid: 是开发者在微信开房平台提交申请后，获得appid和一个秘钥 scope: snsapi_login这个是代表网页版 redirect_uri: 这个
vue3 - 最新详细实现企业微信扫码登录功能，vue3网站网页接入集成企业微信扫码登陆及详细示例代码教程，vue3用户扫描企业微信二维码进行登录后获取用户信息数据，nuxt3调用企业微信的扫描登陆
高级前端工程师
07-11 2350
vue3，nuxt3，企业微信，扫码登录，vue企业微信扫码登陆，vue3如何实现企业微信扫二维码登录，如何监听扫码状态，pc网页端，获取用户手机号昵称，vue3企业微信的扫码登录怎么实现，详细示例代码demo，教程，插件，vue3项目登录接入企业微信，如何新开一页全屏显示登录二维码，pc电脑端企业微信扫码登录详细教程，vue3项目中怎么做企业微信扫码注册登录，内嵌在div容器里/跳页显示登录二维码，报错，redirect_uri参数错误，不部署服务器怎么在本地测试，扫码后没反应，出错，完整流程及代码，授权
电商系统(PC+手机版+微信版)支持微信支付支付宝支付
02-23
支持支付宝、微信支付等多种常用接口，电脑版与手机版与APP无缝结合数据一体!支持图片批量上传，一次性可上传任意张图片，支持多种在线支付接口，如支付宝、网银在线、财付通等接口，支持多级商品分类划分功能，可以方便的划分各商品类别的上下级关系，支持新订单邮件自动通知功能，支持单商品多分类展示功能，订单方面设计完美，如支持订单模糊查询、订单状态的编辑及打印等功能，灵活的导航可以设置首页类别商品在首页显示的位置及状态。
vue微信支付调起方法
02-26
vue微信支付调起方法，WeixinJSBridge是微信浏览器中的一个对象，是微信客户端自带，只能在微信中使用。
Java SpringMVC实现PC端网页微信扫码支付(完整版)
09-01
主要介绍了Java SpringMVC实现PC端网页微信扫码支付(完整版)的相关资料,非常不错具有一定的参考借鉴价值，需要的朋友可以参考下
Vue实现微信支付功能遇到的坑
12-29
微信支付功能相比较支付宝支付，有点点繁琐，整理记录下来，以便日后所需 项目用VUE+EL搭建而成，支付用EL的radio来做的 <el v-model=radio label=weixin> <i class=iconfont></i> <div class=list> <h5>微信支付</h5> <span>推荐安装最新版微信使用</span> </div> </el> <el v-model=radio label=zhifubao> <i class=ic
Vue3 - 最新详解实现网站接入微信支付功能，调起微信支付页面或微信扫码支付效果详细教程，手机移动端H5或电脑PC网页 “微信环境内支付“与“脱离微信环境外部浏览器支付“ 示例代码，支持微信公众号！
王佳斌
06-22 3797
vue3，nuxt3，微信支付，vue微信支付，微信公众号，h5支付，jssdk，JSAPI，公众号网页支付，pc网站，微信支付二维码，生成支付二维码，扫码支付，扫码支付，uni-app，详解微信支付，支付回调报错，微信支付报错，无法支付，无法唤起支付窗口，vue3如何使用微信支付，脱离浏览器怎么用微信支付，redirect_uri参数错误，回调地址错误，h5生成微信支付二维码，H5微信支付，PC端微信支付，前端支付，拉起微信支付，pc扫码支付，新手小白详细教程示例，SDK，vue对接微信支付，拉不起来微信
vue3-pc端生成微信二维码、扫码支付监听支付回调（WebSocket）功能实现
fat_shady的博客
02-22 5342
pc端微信支付功能，展示二维码，websocket连接获取支付成功回调
vue pc生成二维码支付
Jerry子辰的博客
04-15 489
这里介绍两种vue生成二维码的方法 QRcode vue-qr vue-qr比QRcode功能多在可以在中间加logo QRcode npm npm install qrcodejs2 import 在所需页面导入 import QRCode from 'qrcodejs2' use 复制代码<div class="qrcode" ref="qrCodeUrl"></div> <script> methods: { creatQr...
vue中实现微信支付
qq_44845659的博客
01-05 1万+
vue实现微信支付有三种方式，第一种方式是PC端支付，第二种方式是H5支付，第三种方式是微信公众号支付。其中的pc端支付，其实就是调用后端的接口，给后端传一些签名校验，后端直接返回一个支付的二维码图片，H5支付就是手机浏览器的支付，而微信公众号里面的支付我们用的是JSAPI支付，JSAPI支付的调用需要在微信商户平台申请及配置，只有开通了JASPI才有权限实现H5支付。 一、pc端支付 关于pc端的支付，这块儿是由后端直接返一个支付二维码的图片，前端做展示就好了，关于支付成功的状态，通过轮询订单详情的一个接
vue PC端生成微信二维码进行支付
06-01
要在 Vue PC端生成微信二维码进行支付，你可以使用第三方库，如 `qrcode` 来生成二维码，并且使用微信支付的 API 来实现支付功能。 首先，你需要安装 `qrcode` 库。你可以使用 npm 命令进行安装： ``` npm install qrcode --save ``` 接下来，在你的 Vue 组件中，你可以使用以下代码生成二维码： ```javascript import QRCode from 'qrcode' export default { data() { return { qrcodeUrl: '' // 用于存储生成的二维码图片地址 } }, methods: { generateQRCode() { const el = this.$refs.qrcode const url = '这里是二维码的内容，可以是一个链接或其他字符串' QRCode.toDataURL(url, { errorCorrectionLevel: 'H', margin: 1 }) .then(dataUrl => { this.qrcodeUrl = dataUrl }) .catch(err => { console.error(err) }) } } } ``` 这里使用 `QRCode.toDataURL()` 方法生成二维码，并将生成的图片地址存储在 `qrcodeUrl` 变量中。你可以将 `qrcodeUrl` 绑定到一个 `img` 标签上来显示二维码图片。 接下来，你需要实现微信支付功能。你可以使用微信支付的 API 来完成支付流程，具体步骤如下： 1. 获取支付参数：你需要向服务器发送请求，获取支付所需的参数，包括订单号、金额、签名等。 2. 调起微信支付：调用 `wx.chooseWXPay()` 方法，将支付参数传递给微信支付接口进行支付。 ```javascript // 获取支付参数 axios.get('/api/getPayParams') .then(res => { const params = res.data // 调起微信支付 wx.chooseWXPay({ timestamp: params.timestamp, // 时间戳 nonceStr: params.nonceStr, // 随机字符串 package: params.package, // 包含预支付订单 ID 的字符串 signType: params.signType, // 签名类型 paySign: params.paySign, // 签名 success: res => { // 支付成功 console.log('支付成功', res) }, fail: err => { // 支付失败 console.error('支付失败', err) } }) }) .catch(err => { console.error(err) }) ``` 注意，以上代码中的 `wx.chooseWXPay()` 方法需要在微信公众号中使用，如果需要在 PC 端使用，可以使用模拟器或者其他工具进行测试。 希望这能帮助到你。如果你有其他问题，请随时提出。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值