uniapp jsapi支付如何实现

“在uni-app中如何实现JSAPI支付？我已经按照官方文档接入了微信支付，但在调用JSAPI时一直报错。具体流程应该是怎样的？是否需要额外配置支付目录或授权域名？有没有完整的示例代码可以参考？”

2 回复

在uniapp中实现JSAPI支付，需调用微信支付接口。先通过后端生成预支付订单，获取支付参数，再调用uni.requestPayment发起支付。注意配置支付目录和授权域名。


在 UniApp 中实现 JSAPI 支付（常用于微信小程序或公众号支付），主要步骤如下：

1. 准备工作

  • 申请微信支付商户号，并配置支付目录和授权域名。
  • 获取 AppID、商户号（mch_id）、API 密钥（key）等参数。

2. 后端生成支付参数

支付需后端生成签名和预支付订单。示例流程（以 Node.js 为例）：

// 后端：使用微信支付统一下单 API
const crypto = require('crypto');
const axios = require('axios');

async function createOrder(openid, total_fee, order_id) {
  const params = {
    appid: '你的AppID',
    mch_id: '商户号',
    nonce_str: Math.random().toString(36).substr(2),
    body: '商品描述',
    out_trade_no: order_id,
    total_fee: total_fee,
    spbill_create_ip: '用户IP',
    notify_url: '支付回调URL',
    trade_type: 'JSAPI',
    openid: openid // 从小程序/公众号获取
  };
  
  // 生成签名
  const sign = generateSign(params, '你的API密钥');
  params.sign = sign;
  
  // 调用统一下单接口
  const response = await axios.post('https://api.mch.weixin.qq.com/pay/unifiedorder', 
    `<xml>${Object.keys(params).map(key => `<${key}>${params[key]}</${key}>`).join('')}</xml>`
  );
  
  // 解析返回的 prepay_id
  const prepay_id = parseXMLResponse(response.data).prepay_id;
  return prepay_id;
}

function generateSign(params, key) {
  const sortedParams = Object.keys(params).sort().map(k => `${k}=${params[k]}`).join('&') + `&key=${key}`;
  return crypto.createHash('md5').update(sortedParams).digest('hex').toUpperCase();
}

3. UniApp 前端调用支付

在后端返回 prepay_id 后，前端发起支付：

// UniApp 前端
uni.requestPayment({
  provider: 'wxpay',
  timeStamp: String(Date.now()),
  nonceStr: '随机字符串',
  package: `prepay_id=${prepay_id}`, // 从后端获取
  signType: 'MD5',
  paySign: '后端计算的签名', // 后端根据参数生成
  success: (res) => {
    console.log('支付成功', res);
  },
  fail: (err) => {
    console.log('支付失败', err);
  }
});

4. 注意事项

  • 签名验证：前后端均需严格按微信支付规则生成签名，避免支付失败。
  • 安全：敏感操作（如生成预支付订单）需在后端完成，防止 API 密钥泄露。
  • 跨平台适配：UniApp 的 uni.requestPayment 会自动适配小程序或 H5 环境。

总结

通过后端生成预支付订单和签名，前端调用 uni.requestPayment 即可实现支付。确保参数正确且签名有效，测试时使用微信开发者工具或真机调试。

回到顶部