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

---

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

---

支付页完