wechat-app-mall支付系统：微信支付+余额支付完整实现
项目地址: https://gitcode.com/gh_mirrors/we/wechat-app-mall 还在为小程序支付功能开发而烦恼？一文掌握wechat-app-mall双支付体系完整实现方案，解决电商支付核心痛点！
🎯 读完本文你将获得
- ✅ 微信小程序支付完整接入流程
- ✅ 余额支付系统设计与实现
- ✅ 支付状态机与异常处理机制
- ✅ 多场景支付适配方案
- ✅ 安全支付最佳实践
📊 支付系统架构概览
🔧 核心组件解析
1. 支付组件 (components/payment)
支付组件是系统的核心，支持多种支付方式：
// 支付方式配置
data: {
payType: 'wx', // 默认微信支付
alipayOpenMod: '0'
}
// 支付提交逻辑
async submit() {
const postData = {
token: wx.getStorageSync('token'),
money: this.data.money,
remark: this.data.remark,
}
// 微信支付处理
if (this.data.payType == 'wx') {
res = await WXAPI.payVariableUrl('/pay/wx/wxapp', postData)
// 调起微信支付
wx.requestPayment({
timeStamp: res.data.timeStamp,
nonceStr: res.data.nonceStr,
package: res.data.package,
signType: res.data.signType,
paySign: res.data.paySign,
success: () => {
this.triggerEvent('ok', this.data)
}
})
}
}
2. 支付工具类 (utils/pay.js)
封装通用支付方法，支持多种业务场景：
function wxpay(type, money, orderId, redirectUrl, data, content) {
const postData = {
token: wx.getStorageSync('token'),
money: money,
remark: "在线充值",
content: content ? content : ''
}
// 不同业务类型配置
if (type === 'order') {
postData.remark = "支付订单 ：" + orderId;
postData.nextAction = { type: 0, id: orderId };
}
if (type === 'paybill') {
postData.remark = "优惠买单 ：" + data.money;
postData.nextAction = { type: 4, uid: wx.getStorageSync('uid'), money: data.money };
}
}
💰 余额支付实现详解
余额支付状态机
核心余额支付逻辑
在订单创建后的支付处理中：
// 余额支付处理逻辑
if (balance || res.data.amountReal * 1 == 0) {
const money = (res.data.amountReal * 1 - balance * 1).toFixed(2)
if (money <= 0) {
// 余额足够支付
wx.showModal({
title: '请确认支付',
content: `您当前可用余额¥${balance}，使用余额支付¥${res.data.amountReal}？`,
success: res2 => {
if (res2.confirm) {
// 调用余额支付API
WXAPI.orderPay(wx.getStorageSync('token'), orderId).then(res3 => {
if (res3.code != 0) {
wx.showToast({ title: res3.msg, icon: 'none' })
return
}
wx.redirectTo({ url: "/pages/order-list/index" })
})
}
}
})
} else {
// 余额不足，需要混合支付
this.setData({
orderId,
money,
paymentShow: true,
nextAction: { type: 0, id: orderId }
})
}
}
🛡️ 支付安全机制
1. Token验证机制
所有支付请求都必须携带有效的用户token：
const postData = {
token: wx.getStorageSync('token'), // 必须的认证令牌
money: this.data.money,
remark: this.data.remark,
}
2. 金额校验
// 充值金额校验
if (!amount || amount * 1 < 0) {
wx.showModal({
title: '错误',
content: '请填写正确的充值金额',
showCancel: false
})
return
}
// 最小金额限制
if (amount * 1 < this.data.recharge_amount_min * 1) {
wx.showModal({
title: '错误',
content: '单次充值金额至少' + this.data.recharge_amount_min + '元',
showCancel: false
})
return
}
3. 支付结果验证
// 微信支付结果处理
wx.requestPayment({
// ... 支付参数
fail: function (aaa) {
console.error(aaa)
wx.showToast({ title: '支付失败:' + aaa })
},
success: function () {
wx.showToast({ title: '支付成功' })
wx.redirectTo({ url: redirectUrl })
}
})
📋 支付场景适配表
| 支付场景 | 支付方式 | 适用业务 | 特殊处理 |
|---|---|---|---|
| 商品订单 | 微信支付/余额支付 | 普通购物 | 支持优惠券、积分抵扣 |
| 充值业务 | 微信支付 | 余额充值 | 支持充值优惠活动 |
| 优惠买单 | 微信支付/余额支付 | 到店消费 | 快速支付流程 |
| 分销购买 | 微信支付 | 分销资格 | 特殊业务逻辑 |
| 团长购买 | 微信支付 | 团长资格 | 特殊业务逻辑 |
🔄 支付流程优化
1. 混合支付支持
系统支持余额+微信支付的混合模式：
// 混合支付处理
if (money <= 0) {
// 全额余额支付
} else {
// 余额支付部分，微信支付补差
this.setData({
paymentShow: true,
nextAction: { type: 0, id: orderId }
})
}
2. 支付状态管理
🚀 实战代码示例
完整的支付组件使用
// 在页面中引入支付组件
{
"usingComponents": {
"payment": "/components/payment/index"
}
}
// WXML中使用
<payment
money="{{orderAmount}}"
remark="订单支付"
nextAction="{{nextAction}}"
extData="{{extData}}"
show="{{showPayment}}"
bind:ok="onPaymentSuccess"
bind:cancel="onPaymentCancel"
/>
支付结果处理
// 支付成功回调
onPaymentSuccess: function(e) {
wx.showToast({ title: '支付成功' })
// 跳转到订单列表或详情
wx.redirectTo({ url: '/pages/order-list/index' })
},
// 支付取消处理
onPaymentCancel: function() {
// 可选的取消逻辑
this.setData({ showPayment: false })
}
📝 常见问题与解决方案
Q1: 支付参数错误怎么办？
A: 检查token有效性、金额格式、业务类型参数是否正确传递。
Q2: 余额支付失败如何处理？
A: 检查用户余额是否充足，网络连接是否正常，后端服务是否可用。
Q3: 微信支付调起失败？
A: 验证appid配置、支付证书、域名授权等设置。
Q4: 支付状态不同步？
A: 实现支付结果查询机制，定期同步支付状态。
🎯 最佳实践建议
- 支付超时处理: 设置支付超时时间，自动取消未完成的支付
- 结果验证机制: 支付成功后主动查询订单状态确认
- 异常重试机制: 网络异常时提供重新支付的选项
- 日志记录: 详细记录支付流程关键节点信息
- 用户引导: 清晰的支付流程指引和状态提示
📈 性能优化策略
| 优化点 | 实施方法 | 效果 |
|---|---|---|
| 支付预加载 | 提前加载支付所需资源 | 减少支付等待时间 |
| 本地缓存 | 缓存用户支付信息 | 提升支付体验 |
| 接口合并 | 减少支付相关API调用 | 降低网络开销 |
| 错误降级 | 支付失败友好提示 | 提升用户体验 |
通过本文的详细解析，相信你已经全面掌握了wechat-app-mall支付系统的实现原理和实践技巧。这套支付系统经过大量实际项目验证，稳定可靠，能够满足各种电商场景的支付需求。
点赞/收藏/关注三连，获取更多小程序开发实战干货！下期我们将深入讲解「用户积分与优惠券系统」的实现方案。
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
