微信小程序支付功能完整流程记录(前端)

一、准备工作

在开始前，你需要具备以下工具和信息：

• 微信公众平台的AppID、AppSecret和商户号（若未注册，需要前往微信公众平台进行注册）
• 微信支付开发文档

二、接入微信支付

1. 获取用户授权

由于小程序的支付需要获取用户的授权，因此我们需先引入小程序官方提供的授权组件。

<view>
  <button open-type="getUserInfo" bindgetuserinfo="onGetUserInfo">微信登录</button>
</view>

// 获取用户信息
onGetUserInfo(e) {
  if (e.detail.errMsg === 'getUserInfo:ok') {
    // 用户授权成功，发起登录请求
    // ...
  } else {
    // 用户授权失败，提示用户授权
    // ...
  }
}

2. 获取用户openid

在小程序登录成功后，我们可以通过发起RESTful API或者使用小程序官方提供的API获取用户的openid。

wx.login({
  success: ({ code }) => {
    // 发起RESTful API请求，换取openid
    wx.request({
      url: 'https://api.weixin.qq.com/sns/jscode2session',
      data: {
        appid: 'YOUR_APPID',
        secret: 'YOUR_APPSECRET',
        js_code: code,
        grant_type: 'authorization_code'
      },
      success: ({ data: { openid } }) => {
        // openid获取成功，保存到本地
        // ...
      }
    })
  }
})

3. 调用后端预支付API

后端预支付API的目的是生成微信支付所需的sign等信息，然后将这些信息返回给前端。

// 发起RESTful API请求，获取预支付信息
wx.request({
  url: 'https://www.yoursite.com/api/pay',
  data: {
    openid: 'USER_OPENID',
    total_fee: 'PAY_AMOUNT'
  },
  success: ({ data: { prepay_id } }) => {
    // 预支付信息获取成功，调用微信支付API
    // ...
  }
})

4. 调用微信支付API

在获取预支付信息之后，我们需要调用微信支付API进行支付。

// 微信支付API调用
wx.requestPayment({
  timeStamp: 'TIME_STAMP',
  nonceStr: 'NONCE_STR',
  package: `prepay_id=${prepay_id}`,
  signType: 'MD5',
  paySign: 'PAY_SIGN',
  success: () => {
    // 支付成功，跳转到支付成功页面
    // ...
  },
  fail: () => {
    // 支付失败，提示用户重新支付
    // ...
  }
})

三、示例说明

示例1：使用云函数调用后端预支付API

// 调用云函数
wx.cloud.callFunction({
  name: 'pay',
  data: {
    openid: 'USER_OPENID',
    total_fee: 'PAY_AMOUNT'
  },
  success: ({ result: { prepay_id } }) => {
    // 预支付信息获取成功，调用微信支付API
    // ...
  }
})

示例2：使用自定义组件封装支付组件

<!-- 将支付组件封装成自定义组件 -->
<template name="payment">
  <button bindtap="onPayment">微信支付</button>
</template>

<!-- 引入支付组件 -->
<import src="../components/payment.wxml" />

<view>
  <payment bindpayment="onPayment"></payment>
</view>

<!-- 在page.js中实现onPayment方法 -->
Page({
  onPayment() {
    // 调用支付API
    // ...
  }
})

以上就是微信小程序支付功能完整流程的记录，希望对你有所帮助。