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

支付流程

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

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