微服务项目之电商--28.微信支付

最新推荐文章于 2022-02-07 18:10:10 发布

键盘林

最新推荐文章于 2022-02-07 18:10:10 发布

阅读量939

点赞数

分类专栏：项目实战文章标签：微信支付

本文链接：https://blog.csdn.net/qq_37909508/article/details/99945444

版权

项目实战专栏收录该内容

30 篇文章 6 订阅

订阅专栏

3.微信支付

3.1.介绍

微信支付官方文档：https://pay.weixin.qq.com/index.php/core/home/login?return_url=%2F

我们选择开发文档，而后进入选择页面：

选择扫码支付：

此处我们使用模式二来开发：

3.2.开发流程

模式二与模式一相比，流程更为简单，不依赖设置的回调支付URL。

商户后台系统先调用微信支付的统一下单接口，微信后台系统返回链接参数code_url；

商户后台系统将code_url值生成二维码图片，用户使用微信客户端扫码后发起支付。

注意：code_url有效期为2小时，过期后扫码不能再发起支付。

流程图：

这里我们把商户（我们）要做的事情总结一下：

1、商户生成订单
2、商户调用微信下单接口，获取预交易的链接
3、商户将链接生成二维码图片，展示给用户；
4、用户支付并确认
5、支付结果通知：
- 微信异步通知商户支付结果，商户告知微信支付接收情况
- 商户如果没有收到通知，可以调用接口，查询支付状态
6、如果支付成功，发货，修改订单状态

在前面的业务中，我们已经完成了：

1、生成订单

接下来，我们需要做的是：

2、调用微信接口，生成链接。
3、并且生成二维码图片

3.3.生成二维码

3.3.1.生成预交易链接

我们先根据订单的编号，调用后台服务，生成交易链接，而后才能根据链接生成二维码。

在页面发起请求：

var payVm = new Vue({
    el:"#payVm",
    data:{
        ly,
        orderId:0,// 订单编号
    },
    created(){
        // 判断登录状态
        ly.http.get("/auth/verify").then(() => {
            // 获取订单编号
            this.orderId = ly.getUrlParam("orderId");
            // 获取请求链接
            ly.http.get("/order/url/" + this.orderId)
                .then(resp => {
                    console.log(resp.data);
                })
        }.catch(() => {
			// 未登录，跳转至登录页
             location.href = "/login.html?returnUrl=" + location.href;
        })
    },
    components: {
        shortcut: () => import("./js/pages/shortcut.js")
    }
});

后台已经定义好生成付款地址的接口。

刷新页面查看：

3.3.2.生成二维码

这里我们使用一个生成二维码的JS插件：qrcode，官网：https://github.com/davidshimjs/qrcodejs

我们把这个js脚本引入到项目中：

官方使用案例：

然后在页面引用：

页面定义一个div，用于展示二维码：

然后获取到付款链接后，根据链接生成二维码：

// 判断登录状态
ly.http.get("/auth/verify").then(() => {
    // 获取订单编号
    this.orderId = ly.getUrlParam("orderId");
    // 获取请求链接
    ly.http.get("/order/url/" + this.orderId)
        .then(resp => {
            new QRCode(document.getElementById("qrImage"), {
                text: resp.data,
                width: 250,
                height: 250,
                colorDark: "#000000",
                colorLight: "#ffffff",
                correctLevel: QRCode.CorrectLevel.H
            });
        })
}).catch(() => {
    // 未登录，跳转至登录页
    location.href = "/login.html?returnUrl=" + location.href;
})

刷新页面，查看效果：

此时，客户用手机扫描二维码，可以看到付款页面。

3.4.付款状态查询

跳转到支付页面后，我们等待用户付款，付款完成则跳转到付款成功页面。

3.4.1.页面循环查询支付状态

不过，因为不清楚用户何时会付款，因此这里采用循环的方式，不断请求判断是否支付成功。

// 开启定时任务，查询付款状态
const taskId = setInterval(() => {
    ly.http.get("/order/state/" + this.orderId)
        .then(resp => {
        let i = resp.data;
        if (i === 1) {
            // 付款成功
            clearInterval(taskId);
            // 跳转到付款成功页
            location.href = "/paysuccess.html?orderId=" + this.orderId;
        } else if (i === 2) {
            // 付款失败
            clearInterval(taskId);
            // 跳转到付款失败页
            location.href = "/payfail.html";
        }
    })
}, 3000);