PC端实现微信支付功能（Vue2.0）

简介

在实现微信支付之前，我们要知道，在提交订单是我们需要携带一个query参数去支付页面

为什么要携带参数？

1.为了要获取支付信息，支付信息包含：

1.1 需要支付多少钱，并渲染到支付界面，提示用户

1.2 服务器返回的url，用于生成二维码

2.为了下次请求查询支付状态（需要定时发请求检查支付状态）

获取支付信息：

  // 获取需要花多少钱async getPayInfo() {let result = await this.$API.reqPayInfo(this.$route.query.orderId);if (result.code == 200) {this.totalFee = result.data.totalFee;this.payInfo = result.data;} else {alert("失败");}},

由上图我们可以看到，数据已经拿到了，价格为18486, codeUrl就是可以生成二维码的url

这里我们使用ElementUI组件库中的Message Box弹窗

点击支付按钮，进行弹窗，这个过程我就不再赘述了。

弹窗之后我们需要生成一个微信二维码，我们需要利用qrcode插件

qrcode - npm这是他的指导手册

import QRCode from "qrcode";

当我们点击支付按钮就应该生成二维码

// 生成二维码

let url = await QRCode.toDataURL(this.payInfo.codeUrl);

此时二维码已经生成了，但没有实现支付功能，我们需要借助MessageBox中的beforeClose

——MessageBox 关闭前的回调，会暂停实例的关闭

具体参数可看文档Element - The world's most popular Vue UI framework

在此之前，我们需要在data中定义两个变量，code和timer

data() {

return {

totalFee: "", //价格为18486

payInfo: {}, //支付信息

timer: null, //为定时器准备的，这个不理解也可继续往下看

code: "" //我们需要留存请求支付的状态码，205的话说明支付成功

};

},

常规来说200是支付成功，205是支付中，我这样做的目的也是为了能不用付款（但发请求）就可实现功能。

 // 点击打开支付弹窗async open() {//  生成二维码let url = await QRCode.toDataURL(this.payInfo.codeUrl);this.$alert(`<img src=${url} />`, "请使用微信扫码支付", {showClose: false,showCancelButton: true,showConfirmButton: true,confirmButtonText: "支付成功",cancelButtonText: "支付遇到问题",center: true,dangerouslyUseHTMLString: true,beforeClose:(action, instance, done)=>{if (action == "confirm") {console.log("你点击的是支付成功");// 判断是否真的支付了if (this.code == 205) {console.log("支付成功啦");clearInterval(this.timer);this.timer = null;}done();} else {clearInterval(this.timer);this.timer = null;done();}}});// 查询支付状态if (!this.timer) {this.timer = setInterval(async () => {let result = await this.$API.reqPayStatus(this.$route.query.orderId);console.log(result);if (result.code == 205) {clearInterval(this.timer);this.timer = null;this.code = 205;// 关闭弹出框this.$msgbox.close()}}, 3000);}}

发现了吗我这里为什么用箭头函数

如果不使用箭头函数或者改变this指向的方法,在beforeClose中的this其实不是组件实例

instance 为 MessageBox 实例，下图证实想法是正确的

于是我在上面的代码中使用的箭头函数，为什么箭头函数的this就可以？

this的指向问题_那只猫喝咖啡的博客-CSDN博客

上面链接有介绍，放心点开，篇幅非常短。

解决了this问题，基本上已经完成了支付功能，剩下的就是在判断支付成功的里面加上路由跳转至支付成功的界面。