微信小程序支付功能开发指南

微信小程序支付是商家实现线上交易的核心功能之一。本文将从前端开发角度，用通俗易懂的语言，带你一步步了解小程序支付的实现流程和注意事项，适合刚接触小程序开发的初学者。

一、开发前的准备

资质要求
- 小程序主体需为企业或个体工商户（个人类型无法开通支付功能）。
- 完成微信认证，并开通微信支付商户号（需公司财务或管理员配合申请）。
配置参数
- 在小程序后台绑定商户号（路径：微信公众平台 → 微信支付 → 关联商户号）。
- 获取支付所需的 AppID（小程序ID）和 MchID（商户号）。

二、支付流程概述

小程序支付的核心步骤分为以下四步：

创建订单 → 2. 获取支付凭证 → 3. 调用支付接口 → 4. 处理支付结果

用户点击支付 → 前端请求后端生成订单 → 后端返回支付参数 → 前端调用微信支付 → 显示支付结果

三、前端代码实现

1. 创建订单

用户点击支付按钮时，前端向后端发送商品信息（如商品ID、价格），后端生成订单并返回 orderId（订单号）。

// 示例：请求创建订单接口
wx.request({
  url: 'https://your-api.com/createOrder',
  method: 'POST',
  data: { productId: '123', price: 100 },
  success: (res) => {
    const orderId = res.data.orderId;
    this.getPaymentData(orderId); // 进入下一步
  }
});

2. 获取支付参数

通过 wx.login 获取用户临时登录凭证 code，将其与 orderId 一起发送给后端，后端返回支付所需的参数（如时间戳、随机字符串、签名等）。

// 示例：获取code并请求支付参数
wx.login({
  success: (loginRes) => {
    const code = loginRes.code;
    wx.request({
      url: 'https://your-api.com/getPaymentData',
      method: 'POST',
      data: { orderId: '123456', code: code },
      success: (res) => {
        const paymentData = res.data;
        this.launchPayment(paymentData); // 进入支付
      }
    });
  }
});

3. 调用支付接口

使用使用 `wx.request`wx.requestPayment 调起微信支付界面，需传入后端返回的支付参数：

wx.requestPayment({
  timeStamp: paymentData.timeStamp, // 时间戳（需字符串类型）
  nonceStr: paymentData.nonceStr,   // 随机字符串
  package: paymentData.package,     // 预支付交易会话ID（如 "prepay_id=xxx"）
  signType: 'MD5',                  // 签名类型（通常为MD5）
  paySign: paymentData.paySign,     // 签名（由后端生成）
  success: () => {
    wx.showToast({ title: '支付成功' });
  },
  fail: (err) => {
    if (err.errMsg === 'requestPayment:fail cancel') {
      wx.showToast({ title: '用户取消支付' });
    } else {
      wx.showToast({ title: '支付失败' });
    }
  }
});

4. 处理支付结果

成功：跳转至订单完成页或刷新订单状态。
失败/取消：提示用户重新支付或检查网络。

四、常见问题与注意事项

签名错误
- 确保前端传递的参数与后端生成签名时的参数完全一致（包括字段名大小写和顺序）
- 签名需按 appId、nonceStr、package、signType、timeStamp 的ASCII字典序拼接后加密生成。
调试技巧
- 在微信开发者工具中开启“模拟支付”功能，避免频繁调用真实支付接口。
- 使用 console.log 打印支付参数，检查是否缺失或格式错误（如时间戳应为字符串）。
安全建议
- 支付参数必须由后端生成，前端不可硬编码或暴露密钥。
- 启用HTTPS协议，防止数据被截取。