wx小程序学习Day9 创建订单、准备预支付、发起微信支付、查询订单

本文详细介绍了微信支付在支付页的实现过程,包括数据展示、支付流程、创建订单、预支付、发起支付、查询订单、错误处理及支付后的数据同步。在支付流程中,重点讲解了如何在不具备微信支付条件的情况下模拟支付步骤,并讨论了支付失败的错误处理和支付成功后的购物车数据清理。此外,还介绍了如何封装统一的请求头到request方法中,以简化请求处理。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >


1. 支付页-数据展示

在这里插入图片描述
cart页的标签和样式拿过来改一改
pay页就长这样
在这里插入图片描述
pay页要展示的商品实际上是在cart页选中的商品,这些商品的checked属性必须为true
cart页的js代码复制过来修改部分逻辑
在这里插入图片描述


2. 支付页-支付流程

实现微信功能需要是已经开通了微信支付,且绑定了商户号的小程序
我🈚️这个条件,所以就走个流程感受一下😢

支付流程:
1.创建订单(获取订单编号)
=> 2.准备预支付(获取pay参数)
=> 3.发起微信支付(提交pay参数)
=> 4.查询订单

3. 支付页-创建订单

订单编号要通过发送请求来获取
在这里插入图片描述
发送的请求要携带请求头参数,值为用户登录成功获取的token值,所以现在要先获取到token

点击支付按钮,先判断缓存中有没有token

  • 如果没有,就跳转到授权页面获取token
  • 如果有token,就正常执行剩下的逻辑
    在这里插入图片描述
    order_number就是获取到的订单编号

3. 支付页-准备预支付和发起微信支付

获取到订单编号之后,要准备预支付,也就是要发送请求获取pay参数
在这里插入图片描述
获取到pay参数之后就可以通过小程序内置的apiwx.requestPayment()提交pay参数
还是照常封装一下
在这里插入图片描述
其实因为pay参数对象中的属性也就是这个api所需要的参数,可以直接像👇这样写
在这里插入图片描述
调用一下
在这里插入图片描述


4. 支付页-查询订单

是否支付成功还需要由后台的订单状态说明,所以我们还需要查询一下后台的订单状态
在这里插入图片描述

5. 支付页-错误处理

以上流程是正常的成功流程,但是我们没有对其他状态作处理,比如支付失败
那么我们可以使用一下try..catch
并且成功支付或失败都给用户showToast 提示一下
成功支付后要跳转到订单页面在这里插入图片描述


6. 支付页-移除购物车已支付的数据

完成微信支付
=> 删除缓存中已经被选中的商品
=> 将删除后的购物车数据填充回缓存
=> 再跳转到订单页面

在这里插入图片描述


7. 封装统一的请求头到request方法中

如果我们的请求路径包含/my/,那么希望request方法自动帮我们加上请求头
这里的header初值不要赋为{},赋为{...params.header},如果之后想要在请求头中新增别的属性,就可以通过params传进来
在这里插入图片描述


支付页完

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值