支付与登录（微信支付、支付宝支付）
支付与登录（微信支付、支付宝支付）
uni-app作为跨平台开发框架，支持微信支付与支付宝支付的集成。这两种支付方式在移动应用中使用频率极高，开发者需要熟悉它们的接入流程和常见问题处理。
微信支付接入
微信支付在uni-app中的实现主要依赖uni.requestPayment API。接入前需确保已在微信开放平台完成应用申请并通过审核。
// 微信支付示例代码
uni.requestPayment({
provider: 'wxpay',
orderInfo: {}, // 服务器返回的支付参数
success: function(res) {
console.log('支付成功:' + JSON.stringify(res));
},
fail: function(err) {
console.log('支付失败:' + JSON.stringify(err));
}
});
关键参数说明：
timeStamp必须为字符串类型的时间戳nonceStr32位内的随机字符串package固定格式为prepay_id=xxxsignType签名算法，通常为MD5或HMAC-SHA256
常见问题处理：
- 签名错误：检查商户密钥是否正确，参数顺序是否与文档一致
- 支付完成未回调：检查APP是否被系统杀死，可添加本地存储标记位
- 跨平台兼容问题：iOS和Android的包名/bundleID必须与微信开放平台注册一致
支付宝支付实现
支付宝支付接入相对简单，但需要注意沙箱环境与生产环境的区别。uni-app同样提供统一API：
// 支付宝支付示例
uni.requestPayment({
provider: 'alipay',
orderInfo: 'partner="2088xxxx"&seller_id="xxx@xxx.com"&...', // 完整订单字符串
success: function(res) {
uni.showToast({ title: '支付成功' });
},
fail: function(err) {
console.error('支付异常', err);
}
});
特别注意：
- 订单字符串必须包含所有必填参数
- Android平台需要配置应用签名
- 服务端需实现异步通知验证
支付状态验证
支付成功后的状态验证应当通过服务端完成，不可依赖客户端返回结果。推荐流程：
- 客户端收到支付成功回调
- 向服务端查询订单状态
- 根据服务端返回结果更新UI
function verifyPayment(orderNo) {
uni.request({
url: '/api/payment/verify',
data: { orderNo },
success(res) {
if(res.data.paid) {
// 实际支付成功处理
} else {
// 支付未完成处理
}
}
});
}
多平台兼容处理
不同平台的支付实现存在差异，需要进行兼容处理：
// 平台检测示例
let provider;
// #ifdef MP-WEIXIN
provider = 'wxpay';
// #endif
// #ifdef APP-PLUS
provider = 'alipay'; // 默认使用支付宝
// #endif
uni.requestPayment({
provider,
// ...其他参数
});
登录授权集成
支付通常需要与登录体系结合，微信登录示例：
uni.login({
provider: 'weixin',
success(res) {
const code = res.code; // 获取临时凭证
uni.request({
url: '/api/wxlogin',
method: 'POST',
data: { code },
success(userInfo) {
// 登录成功处理
}
});
}
});
支付宝授权登录略有不同：
uni.getUserInfo({
provider: 'alipay',
success(res) {
const authCode = res.code;
// 发送authCode到服务端换取用户信息
}
});
安全注意事项
- 支付密钥必须存储在服务端，严禁写在客户端代码中
- 金额校验必须在服务端完成
- 定期检查证书和密钥的有效期
- 实现防重放攻击机制，如订单号唯一性校验
- 关键日志需要脱敏处理
性能优化建议
对于高频支付场景：
- 预创建订单：在用户进入支付流程前提前创建
- 本地缓存支付结果：避免重复查询
- 合并支付验证请求：减少网络开销
- 使用WebSocket接收支付结果通知
// WebSocket监听示例
const socket = uni.connectSocket({
url: 'wss://yourdomain.com/ws'
});
socket.onMessage(res => {
const data = JSON.parse(res.data);
if(data.type === 'payment_success') {
// 更新订单状态
}
});
错误处理机制
完善的错误处理应包括：
- 网络异常重试机制
- 支付超时自动取消
- 余额不足引导其他支付方式
- 系统繁忙时的降级方案
// 带重试的支付示例
function payWithRetry(orderInfo, retryCount = 3) {
uni.requestPayment({
provider: 'wxpay',
orderInfo,
success() { /*...*/ },
fail(err) {
if(retryCount > 0) {
setTimeout(() => payWithRetry(orderInfo, retryCount - 1), 1000);
} else {
uni.showModal({
content: '支付失败，请稍后重试',
showCancel: false
});
}
}
});
}
测试验证要点
支付功能测试必须覆盖：
- 正常支付流程
- 支付中断恢复
- 重复支付处理
- 退款流程验证
- 不同网络环境下的表现
- 国际化场景（如多币种支付）
建议建立自动化测试用例：
// 测试用例示例
describe('支付模块测试', () => {
it('应成功完成微信支付', async () => {
const res = await mockPayment('wxpay');
expect(res).toHaveProperty('paid', true);
});
it('应处理支付超时', async () => {
mockNetworkTimeout();
const res = await payWithRetry(testOrder, 2);
expect(res).toHaveProperty('error', 'timeout');
});
});
用户体验优化
提升支付转化率的细节：
- 保持支付流程不超过3步
- 自动记忆常用支付方式
- 提供清晰的支付进度反馈
- 失败时给出具体原因和解决方案
- 支付完成后引导下一步操作
// 支付进度反馈示例
uni.showLoading({
title: '支付处理中',
mask: true
});
uni.requestPayment({
// ...参数
complete() {
uni.hideLoading();
}
});
服务端配合要求
客户端支付需要服务端支持以下接口：
- 预支付订单创建接口
- 支付结果查询接口
- 退款处理接口
- 支付通知验证接口
- 订单状态同步接口
典型接口响应格式：
{
"code": 200,
"data": {
"orderNo": "20231101123456",
"paid": true,
"amount": 99.00,
"paymentTime": "2023-11-01 12:34:56"
}
}
支付数据分析
建议收集的支付相关指标：
- 支付成功率
- 平均支付时长
- 各支付方式占比
- 失败原因分布
- 用户支付行为路径
可通过自定义事件上报：
uni.reportAnalytics('payment_start', {
payment_type: 'wxpay',
amount: 100
});
国际化支付适配
针对海外用户需考虑：
- 货币单位自动转换
- 当地主流支付方式集成
- 多语言支付界面
- 汇率波动处理
- 跨境支付合规要求
// 多货币支付示例
function formatCurrency(amount, currency) {
return new Intl.NumberFormat(undefined, {
style: 'currency',
currency
}).format(amount);
}
// 输出: ¥100.00 或 $100.00 等
本站部分内容来自互联网,一切版权均归源网站或源作者所有。
如果侵犯了你的权益请来信告知我们删除。邮箱：cc@cccx.cn
