uniapp微信小程序调用微信支付

在 **UniApp** 开发微信小程序时，调用微信支付功能（如 `wx.requestPayment`）需要满足一定的条件和流程。以下是完整的实现步骤、注意事项以及示例代码。 --- ## ✅ 一、准备工作 ### 1. 微信商户平台配置 - 你必须拥有一个 **微信支付商户号** - 在 [微信商户平台](https://pay.weixin.qq.com) 配置好你的小程序 AppID - 设置支付目录、授权域名等信息 ### 2. 后端生成预支付订单 前端无法直接调起微信支付，必须通过后端接口获取以下参数： - `timeStamp` - `nonceStr` - `package` - `signType` - `paySign` 这些数据由后端使用微信统一下单 API 获取，并返回给前端。 --- ## ✅ 二、前端调用支付（UniApp） 在 UniApp 中，使用 `uni.requestPayment()` 方法来调用微信支付，适用于 H5、微信小程序等平台。 ### 示例代码： ```javascript // 支付按钮点击事件 async function handleWeChatPay() { try { // 调用后端接口获取支付参数 const res = await uni.$http.post('/api/wechat/prepay', { orderId: 'your_order_id', openId: 'user_openid' // 用户唯一标识 }); const payData = res.data; // 假设后端返回了支付所需的字段 // 调用微信支付 uni.requestPayment({ timeStamp: payData.timeStamp, nonceStr: payData.nonceStr, package: payData.package, signType: payData.signType || 'MD5', paySign: payData.paySign, success: (res) => { console.log('支付成功', res); uni.showToast({ title: '支付成功' }); // 处理支付成功逻辑 }, fail: (err) => { console.error('支付失败', err); uni.showToast({ icon: 'none', title: '支付取消或失败' }); }, complete: () => { console.log('支付完成'); } }); } catch (error) { console.error('请求支付失败', error); uni.showToast({ icon: 'none', title: '请求支付失败，请重试' }); } } ``` --- ## ✅ 三、关键参数说明 | 参数名 | 类型 | 必填 | 描述 | |-------|------|------|------| | `timeStamp` | String | 是 | 时间戳，从 1970 年 1 月 1 日 00:00:00 到现在的秒数 | | `nonceStr` | String | 是 | 随机字符串，不长于 32 位 | | `package` | String | 是 | 扩展字段，格式为 prepay_id=xxx | | `signType` | String | 是 | 签名算法，推荐 `MD5` 或 `HMAC-SHA256` | | `paySign` | String | 是 | 签名值 | --- ## ✅ 四、常见问题与解决方法 ### ❗ 1. `requestPayment:fail, errMsg:签名错误` - 确保后端签名正确 - 检查是否使用了正确的私钥（微信商户平台下载的） - 校验参数顺序和拼接方式是否符合微信规范 ### ❗ 2. `requestPayment:fail, errMsg:timestamp参数异常` - 确保时间戳是字符串类型（不是数字） - 时间戳必须是当前时间（误差不超过5分钟） ### ❗ 3. `requestPayment:fail, errMsg:nonceStr不合法` - 检查随机字符串是否重复或长度过长（建议用 UUID） --- ## ✅ 五、完整流程图 ``` 用户点击支付 ↓ 调用后端接口生成预支付订单 ↓ 后端调用微信统一下单API ↓ 返回支付参数给前端 ↓ 前端调用 uni.requestPayment() ↓ 用户完成支付 ↓ 微信服务器异步通知支付结果（后端处理） ``` --- ## ✅ 六、补充：微信统一下单接口文档参考 你可以参考官方文档了解如何生成预支付订单： 👉 [微信统一下单接口文档](https://pay.weixin.qq.com/wiki/doc/api/wxpay_v2.md) --- ###