微信小程序支付功能完整流程

支付流程

• 整个支付流程分为四个步骤：

  1. 获取令牌token

  2. 建立订单

  3. 预支付，获取支付参数对象pay

  4. 发起微信支付

  5. 收尾工做。跳转到订单页面，删除购物车中已购买的商品

• 请求方式：POST

  整个支付过程当中用到的网络请求较多，而且有不少的共性，建议封装到request.js中

• 整个支付过程都要用try-catch包裹(我没有用)

[舒适提示]：支付流程中的url已失效

获取令牌token

• 获取令牌token

// 点击支付
async handleOrderPay() {
  // 从缓存中获取token
  const token = wx.getStorageSync('token')
  // 若是token不存在，跳转到受权页面获取token
  if (!token) {
    wx.navigateTo({
      url: '/pages/auth/auth',
    })
 }

<!-- 点击按钮获取用户信息 -->
<button type="primary" plain open-type="getUserInfo" bindgetuserinfo="handleGetUserInfo">受权</button>

• 缓存中不存在token，受权！

// 受权操做
// pages/auth/auth.js
import {request} from '../../request/index.js' //网络请求
import regeneratorRuntime from '../../lib/runtime/runtime' //使用es7语法
import {login} from '../../utils/asyncWx.js' //内部封装了wx.login()，经过该方法获取一个必须参数code

Page({
  // 获取用户信息
  async handleGetUserInfo(e) {
    try {
      // 获取小程序登陆成功后的五个必须参数
      const {
        encryptedData,
        rawData,
        iv,
        signature
      } = e.detail
      const {
        code
      } = await login()
      // 将这五个参数存入loginParams自定义对象中
      const loginParams = {
        encryptedData,
        rawData,
        iv,
        signature,
        code
      }
      // 获取token
      const {
        token
      } = await request({
        url: '/users/wxlogin',
        // 传入这五个必须参数
        data: loginParams,
        method: 'POST'
      })
      // 将token存入缓存中，同时跳转到上一个页面
      wx.setStorageSync('token', token)
      wx.navigateBack({
        // delta表示返回的层级，1表示返回上一层，2表示返回上两层
        delta: 1,
      })
    } catch (error) {
      console.log(error)
    }
  }
})

建立订单

• 获取到5个必须参数

// 建立订单
    // 请求头参数，这个参数会贯穿整个支付过程当中的网络请求
    const header = {
      // 受权参数即为token
      Authorization: token
    }
    // 请求体参数
    const order_price = this.data.totalPrice //总价格
    const consignee_addr = this.data.address.all //详细收获地址
    const cart = this.data.cart 
    let goods = [] //订单数组，从购物车中提取出几个所须要的属性组成的数组
    goods = cart.forEach(v => {
      goods_id: v.goods_id
      goods_number: v.num
      goods_price: v.goods_price
    })
	// 将所须要的订单参数存入orderParams
    const orderParams = {
      order_price,
      consignee_addr,
      goods
    }

• 获取订单编号

// 获取订单编号
    const {order_number} = await request({
      url: '/my/orders/create',
      method: 'POST',
      // 将以前得到的订单参数传入
      data: orderParams,
      header
    })
    console.log(order_number)
  }

预支付

• 根据订单编号获取到支付参数对象pay

const {pay} = await request({
      url: '/my/orders/req_unifiedorder',
      method: "POST",
      header,
      // 传入订单编号
      data: {
        order_number
      }
    })
    console.log('pay')

发起微信支付

• 将支付参数pay传入到requestPayment中便可

await requestPayment(pay)

收尾工做

• 跳转到订单页面，同时删除购物车中以购买的商品

await showToast('支付成功')
      // 删除缓存中已经被选中的商品
      let newCart = wx.getStorageSync('cart')
      newCart = newCart.filter(v => !v.checked)
      wx.setStorageSync('cart', newCart)
      // 此时跳转到订单页面
      wx.navigateTo({
        url: '/pages/order/order',
      })