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

支付流程

• 整個支付流程分為四個步驟：

  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',
      })