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

您所在的位置:网站首页 下单小程序怎么做的 wx小程序学习Day9 创建订单、准备预支付、发起微信支付、查询订单

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

2024-07-16 05:14| 来源: 网络整理| 查看: 265

学习内容 1. 支付页-数据展示2. 支付页-支付流程3. 支付页-创建订单3. 支付页-准备预支付和发起微信支付4. 支付页-查询订单5. 支付页-错误处理6. 支付页-移除购物车已支付的数据7. 封装统一的请求头到request方法中

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传进来 在这里插入图片描述

支付页完



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3