学习内容

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传进来

支付页完